diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index fd178af08a3..bb32affe1ef 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -1,4 +1,5 @@ import React, { ReactNode, Ref } from 'react' +import loadable from '@loadable/component' import styled from 'styled-components' import { LocationProvider } from './location-context' import LayoutOverlay from './layout-overlay' @@ -13,13 +14,11 @@ import PaymentAgentAffiliateNav from 'features/components/templates/navigation/p import BugBountyNav from 'features/components/templates/navigation/bug-bounty-nav' import CareerNav from 'features/components/templates/navigation/career-nav' import MarketNav from 'features/components/templates/navigation/market-nav' -import RebrandingFooter from 'features/components/templates/footer' import PpcProvider from 'features/contexts/ppc-campaign/ppc.provider' import BannerAlert from 'components/custom/_banner-alert' import { bannerTypes } from 'common/constants' -// const LoadableFooter = Loadable(() => import('./footer')) -// const BeSquareFooter = Loadable(() => import('./besquare/footer')) +const RebrandingFooter = loadable(() => import('features/components/templates/footer')) type LayoutProps = { children: ReactNode diff --git a/src/features/components/templates/navigation/template/nav-context/index.tsx b/src/features/components/templates/navigation/template/nav-context/index.tsx index 3945d7b0a81..c680d6347d1 100644 --- a/src/features/components/templates/navigation/template/nav-context/index.tsx +++ b/src/features/components/templates/navigation/template/nav-context/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useContext, useMemo } from 'react' +import React, { ReactNode, useContext, useState, useEffect } from 'react' import { NavItem, SmartMultiColumnItems, @@ -33,25 +33,29 @@ export const isSingleItem = (item: NavItem): item is SmartSingleItem => { export const NavProvider = ({ is_menu_open, onCloseMenu, children, items }: NavProviderProps) => { const { is_mobile_or_tablet } = useBreakpoints() const { is_eu, is_row } = useRegion() + const [link_items, setLinkItems] = useState([]) + const [drop_items, setDropItems] = useState<(SmartSingleColumnItems | SmartMultiColumnItems)[]>( + [], + ) const visible_items = useVisibleContent({ content: items, config: { is_mobile: is_mobile_or_tablet, is_eu, is_row }, }) - const { drop_items, link_items } = useMemo(() => { - const link_items: SmartSingleItem[] = [] - const drop_items: (SmartSingleColumnItems | SmartMultiColumnItems)[] = [] - + useEffect(() => { + const links = [] + const drops = [] visible_items.forEach((item) => { if (isSingleItem(item)) { - link_items.push(item) + links.push(item) } else { - drop_items.push(item) + drops.push(item) } }) - return { link_items, drop_items } - }, [visible_items]) + setLinkItems(links) + setDropItems(drops) + }, [visible_items.length]) return (