Skeleton loader for footer

components/Footer/Navigation/MainNav/index.tsx

@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from "@/components/Icons"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
@@ -30,3 +31,24 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
     </nav>
   )
 }
+
+export function FooterMainNavSkeleton() {
+  const items = Array.from({ length: 4 }).map((_, i) => i)
+
+  return (
+    <nav className={styles.mainNavigation}>
+      <ul className={styles.mainNavigationList}>
+        {items.map((x) => (
+          <li key={x} className={styles.mainNavigationItem}>
+            <Subtitle color="baseTextMediumContrast" type="two" asChild>
+              <span className={styles.mainNavigationLink}>
+                <SkeletonShimmer width="80%" />
+                <ArrowRightIcon color="peach80" />
+              </span>
+            </Subtitle>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

components/Footer/Navigation/SecondaryNav/index.tsx

@@ -1,6 +1,6 @@
 import Image from "@/components/Image"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getLang } from "@/i18n/serverContext"
 
@@ -80,3 +80,46 @@ export default function FooterSecondaryNav({
     </div>
   )
 }
+
+export function FooterSecondaryNavSkeleton() {
+  return (
+    <div className={styles.secondaryNavigation}>
+      <nav className={styles.secondaryNavigationGroup}>
+        <SkeletonShimmer width="10ch" />
+        <ul className={styles.secondaryNavigationList}>
+          <li className={styles.appDownloadItem}>
+            <SkeletonShimmer width="16ch" />
+          </li>
+          <li className={styles.appDownloadItem}>
+            <SkeletonShimmer width="16ch" />
+          </li>
+        </ul>
+      </nav>
+      <nav className={styles.secondaryNavigationGroup}>
+        <SkeletonShimmer width="20ch" />
+        <ul className={styles.secondaryNavigationList}>
+          <li className={styles.secondaryNavigationItem}>
+            <SkeletonShimmer width="25ch" />
+          </li>
+        </ul>
+      </nav>
+      <nav className={styles.secondaryNavigationGroup}>
+        <SkeletonShimmer width="15ch" />
+        <ul className={styles.secondaryNavigationList}>
+          <li className={styles.secondaryNavigationItem}>
+            <SkeletonShimmer width="30ch" />
+          </li>
+          <li className={styles.secondaryNavigationItem}>
+            <SkeletonShimmer width="36ch" />
+          </li>
+          <li className={styles.secondaryNavigationItem}>
+            <SkeletonShimmer width="12ch" />
+          </li>
+          <li className={styles.secondaryNavigationItem}>
+            <SkeletonShimmer width="20ch" />
+          </li>
+        </ul>
+      </nav>
+    </div>
+  )
+}

components/Footer/Navigation/index.tsx

@@ -1,7 +1,7 @@
 import { getFooter } from "@/lib/trpc/memoizedRequests"
 
-import FooterMainNav from "./MainNav"
-import FooterSecondaryNav from "./SecondaryNav"
+import FooterMainNav, { FooterMainNavSkeleton } from "./MainNav"
+import FooterSecondaryNav, { FooterSecondaryNavSkeleton } from "./SecondaryNav"
 
 import styles from "./navigation.module.css"
 
@@ -10,6 +10,7 @@ export default async function FooterNavigation() {
   if (!footer) {
     return null
   }
+
   return (
     <section className={styles.section}>
       <div className={styles.maxWidth}>
@@ -22,3 +23,14 @@ export default async function FooterNavigation() {
     </section>
   )
 }
+
+export function FooterNavigationSkeleton() {
+  return (
+    <section className={styles.section}>
+      <div className={styles.maxWidth}>
+        <FooterMainNavSkeleton />
+        <FooterSecondaryNavSkeleton />
+      </div>
+    </section>
+  )
+}