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