Performance - Lazy load homepage, nav drawer and user menu

frontends/jest-shared-setup.ts

@@ -5,6 +5,7 @@ import { configure } from "@testing-library/react"
 import { resetAllWhenMocks } from "jest-when"
 import * as matchers from "jest-extended"
 import { mockRouter } from "ol-test-utilities/mocks/nextNavigation"
+import preloadAll from "jest-next-dynamic-ts"
 
 expect.extend(matchers)
 
@@ -85,6 +86,10 @@ jest.mock("next/navigation", () => {
   }
 })
 
+beforeAll(async () => {
+  await preloadAll()
+})
+
 afterEach(() => {
   /**
    * Clear all mock call counts between tests.

frontends/main/src/app-pages/HomePage/HomePage.tsx

@@ -1,16 +1,42 @@
 "use client"
 
-import React from "react"
+import React, { Suspense } from "react"
 import { Container, styled, theme } from "ol-components"
-import HeroSearch from "@/page-components/HeroSearch/HeroSearch"
-import BrowseTopicsSection from "./BrowseTopicsSection"
-import NewsEventsSection from "./NewsEventsSection"
-import TestimonialsSection from "./TestimonialsSection"
-import ResourceCarousel from "@/page-components/ResourceCarousel/ResourceCarousel"
-import PersonalizeSection from "./PersonalizeSection"
 import * as carousels from "./carousels"
 import dynamic from "next/dynamic"
 
+const HeroSearch = dynamic(
+  () => import("@/page-components/HeroSearch/HeroSearch"),
+  { ssr: true },
+)
+
+const TestimonialsSection = dynamic(() => import("./TestimonialsSection"), {
+  ssr: true,
+})
+
+const ResourceCarousel = dynamic(
+  () => import("@/page-components/ResourceCarousel/ResourceCarousel"),
+  { ssr: true },
+)
+
+const PersonalizeSection = dynamic(() => import("./PersonalizeSection"), {
+  ssr: true,
+})
+
+const BrowseTopicsSection = dynamic(() => import("./BrowseTopicsSection"), {
+  ssr: true,
+})
+
+const NewsEventsSection = dynamic(() => import("./NewsEventsSection"), {
+  ssr: true,
+})
+
+const LearningResourceDrawer = dynamic(
+  () =>
+    import("@/page-components/LearningResourceDrawer/LearningResourceDrawer"),
+  { ssr: false },
+)
+
 const FullWidthBackground = styled.div({
   background: "linear-gradient(0deg, #FFF 0%, #E9ECEF 100%);",
   paddingBottom: "80px",
@@ -44,11 +70,6 @@ const StyledContainer = styled(Container)({
   },
 })
 
-const LearningResourceDrawer = dynamic(
-  () =>
-    import("@/page-components/LearningResourceDrawer/LearningResourceDrawer"),
-)
-
 const HomePage: React.FC<{ heroImageIndex: number }> = ({ heroImageIndex }) => {
   return (
     <>
@@ -57,21 +78,25 @@ const HomePage: React.FC<{ heroImageIndex: number }> = ({ heroImageIndex }) => {
         <StyledContainer>
           <HeroSearch imageIndex={heroImageIndex} />
           <section>
-            <FeaturedCoursesCarousel
-              titleComponent="h2"
-              title="Featured Courses"
-              config={carousels.FEATURED_RESOURCES_CAROUSEL}
-            />
+            <Suspense>
+              <FeaturedCoursesCarousel
+                titleComponent="h2"
+                title="Featured Courses"
+                config={carousels.FEATURED_RESOURCES_CAROUSEL}
+              />
+            </Suspense>
           </section>
         </StyledContainer>
       </FullWidthBackground>
       <PersonalizeSection />
       <Container component="section">
-        <MediaCarousel
-          titleComponent="h2"
-          title="Media"
-          config={carousels.MEDIA_CAROUSEL}
-        />
+        <Suspense>
+          <MediaCarousel
+            titleComponent="h2"
+            title="Media"
+            config={carousels.MEDIA_CAROUSEL}
+          />
+        </Suspense>
       </Container>
       <BrowseTopicsSection />
       <TestimonialsSection />

frontends/main/src/page-components/Header/Header.tsx

@@ -1,14 +1,9 @@
 "use client"
 
 import React, { FunctionComponent } from "react"
+import dynamic from "next/dynamic"
 import type { NavData } from "ol-components"
-import {
-  styled,
-  AppBar,
-  NavDrawer,
-  Toolbar,
-  ActionButtonLink,
-} from "ol-components"
+import { styled, AppBar, Toolbar, ActionButtonLink } from "ol-components"
 import {
   RiSearch2Line,
   RiPencilRulerLine,
@@ -25,7 +20,6 @@ import {
 } from "@remixicon/react"
 import { useToggle } from "ol-utilities"
 import MITLogoLink from "@/components/MITLogoLink/MITLogoLink"
-import UserMenu from "./UserMenu"
 import { MenuButton } from "./MenuButton"
 import {
   DEPARTMENTS,
@@ -43,6 +37,13 @@ import {
 } from "@/common/urls"
 import { useUserMe } from "api/hooks/user"
 
+const NavDrawer = dynamic(
+  () => import("ol-components").then((mod) => mod.NavDrawer),
+  { ssr: false },
+)
+
+const UserMenu = dynamic(() => import("./UserMenu"), { ssr: false })
+
 const Bar = styled(AppBar)(({ theme }) => ({
   padding: "16px 8px",
   backgroundColor: theme.custom.colors.navGray,

frontends/package.json

@@ -63,6 +63,7 @@
     "jest-environment-jsdom": "^29.5.0",
     "jest-extended": "^4.0.2",
     "jest-fail-on-console": "^3.2.0",
+    "jest-next-dynamic-ts": "^0.1.1",
     "jest-watch-typeahead": "^2.2.2",
     "jest-when": "^3.6.0",
     "postcss-styled-syntax": "^0.7.0",