lazy load banner content (#10899)

GCTC-NTGC · Jul 8, 2024 · f0f8c72 · f0f8c72
1 parent 2a9ed10
commit f0f8c72
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/apps/web/src/components/Layout/BannerContent.tsx b/apps/web/src/components/Layout/BannerContent.tsx
@@ -0,0 +1,28 @@
+import { Alert } from "@gc-digital-talent/ui";
+import { RichTextRenderer, htmlToRichTextJSON } from "@gc-digital-talent/forms";
+
+interface BannerContentProps {
+  title: string;
+  message: string;
+}
+
+const BannerContent = ({ title, message }: BannerContentProps) => (
+  <div
+    data-h2-background-color="base(foreground) base:dark(white)"
+    data-h2-padding="base(x1, 0)"
+  >
+    <div data-h2-container="base(center, large, x1)">
+      <Alert.Root
+        type="warning"
+        live
+        data-h2-shadow="base(none)"
+        data-h2-margin="base(0, -x1, 0, -x1)"
+      >
+        <Alert.Title>{title}</Alert.Title>
+        <RichTextRenderer node={htmlToRichTextJSON(message)} />
+      </Alert.Root>
+    </div>
+  </div>
+);
+
+export default BannerContent;
diff --git a/apps/web/src/components/Layout/SitewideBanner.tsx b/apps/web/src/components/Layout/SitewideBanner.tsx
@@ -3,12 +3,14 @@ import { isAfter } from "date-fns/isAfter";
 import { isBefore } from "date-fns/isBefore";
 import { useQuery } from "urql";
 import { useIntl } from "react-intl";
+import { lazy, Suspense } from "react";
 
 import { graphql } from "@gc-digital-talent/graphql";
 import { parseDateTimeUtc } from "@gc-digital-talent/date-helpers";
-import { Alert } from "@gc-digital-talent/ui";
+import { Loading } from "@gc-digital-talent/ui";
 import { getLocale } from "@gc-digital-talent/i18n";
-import { RichTextRenderer, htmlToRichTextJSON } from "@gc-digital-talent/forms";
+
+const BannerContent = lazy(() => import("./BannerContent"));
 
 const SitewideBanner_Query = graphql(/* GraphQL */ `
   query SitewideBanner {
@@ -66,22 +68,9 @@ const SitewideBanner = () => {
 
   return (
     showMaintenanceBanner && (
-      <div
-        data-h2-background-color="base(foreground) base:dark(white)"
-        data-h2-padding="base(x1, 0)"
-      >
-        <div data-h2-container="base(center, large, x1)">
-          <Alert.Root
-            type="warning"
-            live
-            data-h2-shadow="base(none)"
-            data-h2-margin="base(0, -x1, 0, -x1)"
-          >
-            <Alert.Title>{title}</Alert.Title>
-            <RichTextRenderer node={htmlToRichTextJSON(message)} />
-          </Alert.Root>
-        </div>
-      </div>
+      <Suspense fallback={<Loading inline />}>
+        <BannerContent title={title} message={message} />
+      </Suspense>
     )
   );
 };