From 9f813bebfe5c6a2bf7f2d21340879b1dfaa18cb8 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 25 Oct 2024 11:48:20 +0200
Subject: [PATCH] Refactor and built a breadcrums skeleton

---
 .../my-pages/@breadcrumbs/[...path]/page.tsx  |   3 +-
 .../[contentType]/[uid]/@breadcrumbs/page.tsx |   3 +-
 components/Blocks/DynamicContent/index.tsx    | 104 +++++++++---------
 .../Breadcrumbs/BreadcrumbsSkeleton.tsx       |  31 ++++++
 4 files changed, 88 insertions(+), 53 deletions(-)
 create mode 100644 components/Breadcrumbs/BreadcrumbsSkeleton.tsx

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 85f346971..6775fd188 100644
--- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
@@ -1,6 +1,7 @@
 import { Suspense } from "react"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
@@ -9,7 +10,7 @@ export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
   return (
-    <Suspense>
+    <Suspense fallback={<BreadcrumbsSkeleton />}>
       <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 1e6dc2277..ec8f14553 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
@@ -1,6 +1,7 @@
 import { Suspense } from "react"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
@@ -9,7 +10,7 @@ export default function PageBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
   return (
-    <Suspense>
+    <Suspense fallback={<BreadcrumbsSkeleton />}>
       <Breadcrumbs />
     </Suspense>
   )
diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index c0777de16..bf816e3a8 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -27,57 +27,59 @@ export default function DynamicContent({
 }: DynamicContentProps) {
   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
-        }
-      })()}
+      {renderDynamicComponent(dynamic_content, firstItem)}
     </Suspense>
   )
 }
+
+function renderDynamicComponent(
+  dynamic_content: DynamicContentProps["dynamic_content"],
+  firstItem: DynamicContentProps["firstItem"]
+) {
+  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
+  }
+}
diff --git a/components/Breadcrumbs/BreadcrumbsSkeleton.tsx b/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
new file mode 100644
index 000000000..31b3b8ec6
--- /dev/null
+++ b/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
@@ -0,0 +1,31 @@
+import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./breadcrumbs.module.css"
+
+export default function BreadcrumbsSkeleton() {
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <Link
+            className={styles.homeLink}
+            color="peach80"
+            href={""}
+            variant="breadcrumb"
+          >
+            <HouseIcon color="peach80" />
+          </Link>
+          <ChevronRightIcon aria-hidden="true" color="peach80" />
+        </li>
+
+        <li className={styles.listItem}>
+          <Footnote color="burgundy" type="bold">
+            ...
+          </Footnote>
+        </li>
+      </ul>
+    </nav>
+  )
+}