Skeleton loader for footer

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