scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Skeleton loader for footer

Browse Source
This commit is contained in:
Anton Gunnarsson
2024-11-14 13:25:33 +01:00
parent 1980ae4350
commit 16882fc20a
7 changed files with 151 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/Footer/Navigation/SecondaryNav/index.tsx
View File

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