From 1a921940e835b748cb709c43032d77f9647475a5 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 25 Oct 2024 10:59:34 +0200
Subject: [PATCH] feat: #sw-694 using suspense when loading dynamic content and
 breadcrumbs

---
 .../my-pages/@breadcrumbs/[...path]/page.tsx  |   8 +-
 .../[contentType]/[uid]/@breadcrumbs/page.tsx |   8 +-
 .../(public)/[contentType]/[uid]/page.tsx     |   2 +-
 .../DynamicContent/OverviewTable/index.tsx    |   7 +-
 components/Blocks/DynamicContent/index.tsx    | 106 ++++++++++--------
 5 files changed, 79 insertions(+), 52 deletions(-)

diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
index a5b818f77..85f346971 100644
--- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import Breadcrumbs from "@/components/Breadcrumbs"
 import { setLang } from "@/i18n/serverContext"
 
@@ -6,5 +8,9 @@ import { LangParams, PageArgs } from "@/types/params"
 export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
-  return <Breadcrumbs />
+  return (
+    <Suspense>
+      <Breadcrumbs />
+    </Suspense>
+  )
 }
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx b/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
index 4119f48e3..1e6dc2277 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import Breadcrumbs from "@/components/Breadcrumbs"
 import { setLang } from "@/i18n/serverContext"
 
@@ -6,5 +8,9 @@ import { LangParams, PageArgs } from "@/types/params"
 export default function PageBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
-  return <Breadcrumbs />
+  return (
+    <Suspense>
+      <Breadcrumbs />
+    </Suspense>
+  )
 }
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
index cbb83a9dc..08fa09422 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
@@ -16,7 +16,7 @@ import {
 
 export { generateMetadata } from "@/utils/generateMetadata"
 
-export default async function ContentTypePage({
+export default function ContentTypePage({
   params,
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
   setLang(params.lang)
diff --git a/components/Blocks/DynamicContent/OverviewTable/index.tsx b/components/Blocks/DynamicContent/OverviewTable/index.tsx
index 866a0c7d6..e5c23b370 100644
--- a/components/Blocks/DynamicContent/OverviewTable/index.tsx
+++ b/components/Blocks/DynamicContent/OverviewTable/index.tsx
@@ -9,8 +9,11 @@ export default async function OverviewTable({
   dynamic_content,
   firstItem,
 }: OverviewTableProps) {
-  const levels = await serverClient().contentstack.rewards.all()
-  const membershipLevel = await serverClient().user.safeMembershipLevel()
+  const [levels, membershipLevel] = await Promise.all([
+    serverClient().contentstack.rewards.all(),
+    serverClient().user.safeMembershipLevel(),
+  ])
+
   return (
     <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
       <OverviewTableClient
diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index 21b2616ac..c0777de16 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { env } from "@/env/server"
 
 import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks"
@@ -14,58 +16,68 @@ import SignUpVerification from "@/components/Blocks/DynamicContent/SignUpVerific
 import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
 import SoonestStays from "@/components/Blocks/DynamicContent/Stays/Soonest"
 import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
+import LoadingSpinner from "@/components/LoadingSpinner"
 
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"
 
-export default async function DynamicContent({
+export default function DynamicContent({
   dynamic_content,
   firstItem,
 }: DynamicContentProps) {
-  switch (dynamic_content.component) {
-    case DynamicContentEnum.Blocks.components.current_benefits:
-      return <CurrentRewardsBlock {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.earn_and_burn:
-      return <EarnAndBurn {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.expiring_points:
-      return env.HIDE_FOR_NEXT_RELEASE ? null : (
-        <ExpiringPoints {...dynamic_content} />
-      )
-    case DynamicContentEnum.Blocks.components.how_it_works:
-      return (
-        <HowItWorks dynamic_content={dynamic_content} firstItem={firstItem} />
-      )
-    case DynamicContentEnum.Blocks.components.loyalty_levels:
-      return (
-        <LoyaltyLevels
-          dynamic_content={dynamic_content}
-          firstItem={firstItem}
-        />
-      )
-    case DynamicContentEnum.Blocks.components.membership_overview:
-      return <Overview {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.next_benefits:
-      return <NextLevelRewardsBlock {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.overview_table:
-      return (
-        <OverviewTable
-          dynamic_content={dynamic_content}
-          firstItem={firstItem}
-        />
-      )
-    case DynamicContentEnum.Blocks.components.points_overview:
-      return <PointsOverview {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.previous_stays:
-      return <PreviousStays {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.sign_up_form:
-      return <SignupFormWrapper dynamic_content={dynamic_content} />
-    case DynamicContentEnum.Blocks.components.sign_up_verification:
-      return <SignUpVerification dynamic_content={dynamic_content} />
-    case DynamicContentEnum.Blocks.components.soonest_stays:
-      return <SoonestStays {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.upcoming_stays:
-      return <UpcomingStays {...dynamic_content} />
-    default:
-      return null
-  }
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      {(() => {
+        switch (dynamic_content.component) {
+          case DynamicContentEnum.Blocks.components.current_benefits:
+            return <CurrentRewardsBlock {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.earn_and_burn:
+            return <EarnAndBurn {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.expiring_points:
+            return env.HIDE_FOR_NEXT_RELEASE ? null : (
+              <ExpiringPoints {...dynamic_content} />
+            )
+          case DynamicContentEnum.Blocks.components.how_it_works:
+            return (
+              <HowItWorks
+                dynamic_content={dynamic_content}
+                firstItem={firstItem}
+              />
+            )
+          case DynamicContentEnum.Blocks.components.loyalty_levels:
+            return (
+              <LoyaltyLevels
+                dynamic_content={dynamic_content}
+                firstItem={firstItem}
+              />
+            )
+          case DynamicContentEnum.Blocks.components.membership_overview:
+            return <Overview {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.next_benefits:
+            return <NextLevelRewardsBlock {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.overview_table:
+            return (
+              <OverviewTable
+                dynamic_content={dynamic_content}
+                firstItem={firstItem}
+              />
+            )
+          case DynamicContentEnum.Blocks.components.points_overview:
+            return <PointsOverview {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.previous_stays:
+            return <PreviousStays {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.sign_up_form:
+            return <SignupFormWrapper dynamic_content={dynamic_content} />
+          case DynamicContentEnum.Blocks.components.sign_up_verification:
+            return <SignUpVerification dynamic_content={dynamic_content} />
+          case DynamicContentEnum.Blocks.components.soonest_stays:
+            return <SoonestStays {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.upcoming_stays:
+            return <UpcomingStays {...dynamic_content} />
+          default:
+            return null
+        }
+      })()}
+    </Suspense>
+  )
 }