Skeleton loader for footer

components/Footer/Details/index.tsx

@@ -3,6 +3,7 @@ import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getIntl } from "@/i18n"
@@ -92,3 +93,40 @@ export default async function FooterDetails() {
     </section>
   )
 }
+
+export async function FooterDetailsSkeleton() {
+  const lang = getLang()
+  const intl = await getIntl()
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <section className={styles.details}>
+      <div className={styles.topContainer}>
+        <Link href={`/${lang}`}>
+          <Image
+            alt="Scandic Hotels logo"
+            height={22}
+            src="/_static/img/scandic-logotype-white.svg"
+            width={103}
+          />
+        </Link>
+        <nav className={styles.socialNav}>
+          <SkeletonShimmer width="10ch" height="20px" contrast="dark" />
+        </nav>
+      </div>
+      <div className={styles.bottomContainer}>
+        <div className={styles.copyrightContainer}>
+          <Footnote type="label" textTransform="uppercase">
+            © {currentYear}{" "}
+            {intl.formatMessage({ id: "Copyright all rights reserved" })}
+          </Footnote>
+        </div>
+        <div className={styles.navigationContainer}>
+          <nav className={styles.navigation}>
+            <SkeletonShimmer width="40ch" height="20px" contrast="dark" />
+          </nav>
+        </div>
+      </div>
+    </section>
+  )
+}