diff --git a/apps/web/src/app/[locale]/(interviews)/(marketing)/InterviewsMarketingHomePageBottomContainer.tsx b/apps/web/src/app/[locale]/(interviews)/(marketing)/InterviewsMarketingHomePageBottomContainer.tsx index b324928bc..eb4a2c4f0 100644 --- a/apps/web/src/app/[locale]/(interviews)/(marketing)/InterviewsMarketingHomePageBottomContainer.tsx +++ b/apps/web/src/app/[locale]/(interviews)/(marketing)/InterviewsMarketingHomePageBottomContainer.tsx @@ -3,7 +3,7 @@ import type { InterviewsStudyList } from 'contentlayer/generated'; import { useInView } from 'framer-motion'; import dynamic from 'next/dynamic'; -import { memo, useRef } from 'react'; +import { useRef } from 'react'; import { useUserProfile } from '~/components/global/UserProfileProvider'; import InterviewsMarketingCompaniesSection from '~/components/interviews/marketing/InterviewsMarketingCompaniesSection'; @@ -34,9 +34,12 @@ type Props = Readonly<{ // So that loaded state is persisted across navigations. let loadedBottom = false; -export default function InterviewsMarketingHomePageBottomContainer( - props: Props, -) { +export default function InterviewsMarketingHomePageBottomContainer({ + companyGuides, + questions, +}: Props) { + const { userProfile } = useUserProfile(); + const loadBottomHalfMarkerEarlyRef = useRef(null); const showBottomHalfEarly = useInView(loadBottomHalfMarkerEarlyRef, { amount: 'some', @@ -51,22 +54,6 @@ export default function InterviewsMarketingHomePageBottomContainer( return ( <>
- -
- {loadedBottom || showBottomHalfEarly || showBottomHalf ? ( - - ) : ( -
- )} - - ); -} - -function InterviewsMarketingSections({ companyGuides, questions }: Props) { - const { userProfile } = useUserProfile(); - - return ( - <> @@ -76,9 +63,12 @@ function InterviewsMarketingSections({ companyGuides, questions }: Props) { {!( userProfile?.isInterviewsPremium && userProfile?.plan === 'lifetime' ) && } +
+ {loadedBottom || showBottomHalfEarly || showBottomHalf ? ( + + ) : ( +
+ )} ); } - -const MemoizedInterviewsMarketingSections = memo(InterviewsMarketingSections); -const MemoizedMarketingHomePageBottom = memo(InterviewsMarketingHomePageBottom); diff --git a/apps/web/src/components/interviews/common/InterviewsNavbar.tsx b/apps/web/src/components/interviews/common/InterviewsNavbar.tsx index 3cdf93af2..82bf1ae4c 100644 --- a/apps/web/src/components/interviews/common/InterviewsNavbar.tsx +++ b/apps/web/src/components/interviews/common/InterviewsNavbar.tsx @@ -3,7 +3,7 @@ import { useUser } from '@supabase/auth-helpers-react'; import clsx from 'clsx'; import { usePathname } from 'next/navigation'; -import { memo, useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { RiArrowRightSLine, RiMenuFill, RiStarSmileFill } from 'react-icons/ri'; import gtag from '~/lib/gtag'; @@ -60,32 +60,6 @@ export default function InterviewsNavbar({ bottomBorder = true, hideAdvertiseWithUsBadge, hideOnDesktop = false, -}: Props) { - const navbarRef = useRef(null); - const { isSticky } = useIsSticky(navbarRef); - const translucent = !isSticky; - - return ( -
- -
- ); -} - -function InterviewsNavbarImpl({ - bottomBorder = true, - hideAdvertiseWithUsBadge, - hideOnDesktop = false, }: Props) { const user = useUser(); const isLoggedIn = user != null; @@ -93,7 +67,9 @@ function InterviewsNavbarImpl({ const intl = useIntl(); const isPremium = userProfile?.premium ?? false; const navLinksFull = useInterviewsNavLinks(isLoggedIn, isPremium); + const navbarRef = useRef(null); const pathname = usePathname(); + const { isSticky } = useIsSticky(navbarRef); const [isMobileNavOpen, setIsMobileNavOpen] = useState(false); const navItems = useInterviewsNavItems('nav'); @@ -113,12 +89,21 @@ function InterviewsNavbarImpl({ const displayName = userProfile?.name ?? user?.email; const endAddOnItems = ; + const translucent = !isSticky; const leftLinks = navLinksFull.filter(({ position }) => position === 'start'); const rightLinks = navLinksFull.filter(({ position }) => position === 'end'); return ( - <> +
- +
); } -const MemoizedInterviewsNavbarImpl = memo(InterviewsNavbarImpl); - // Below components are extracted out as a separate component to avoid re-rendering of whole the InterviewsNavbar component // due to useAuthSignInUp when the location changes function SidebarNavAuthLinks({