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,7 +27,15 @@ export default function DynamicContent({
 }: DynamicContentProps) {
   return (
     <Suspense fallback={<LoadingSpinner />}>
-      {(() => {
+      {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} />
@@ -39,10 +47,7 @@ export default function DynamicContent({
       )
     case DynamicContentEnum.Blocks.components.how_it_works:
       return (
-              <HowItWorks
+        <HowItWorks dynamic_content={dynamic_content} firstItem={firstItem} />
-                dynamic_content={dynamic_content}
-                firstItem={firstItem}
-              />
       )
     case DynamicContentEnum.Blocks.components.loyalty_levels:
       return (
@@ -77,7 +82,4 @@ export default function DynamicContent({
     default:
       return null
   }
-      })()}
-    </Suspense>
-  )
 }

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