Refactor and built a breadcrums skeleton

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>
   )

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>
   )

components/Blocks/DynamicContent/index.tsx

@@ -27,57 +27,59 @@ export default function DynamicContent({
 }: DynamicContentProps) {
   return (
     <Suspense fallback={<LoadingSpinner />}>
-      {(() => {
+      {renderDynamicComponent(dynamic_content, 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
-        }
-      })()}
     </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
+  }
+}

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>
+  )
+}