From dc6c2ae483c8c9c189b72ba17c1690f6cde5a5e5 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Tue, 17 Dec 2024 08:20:30 +0100
Subject: [PATCH] Refactor navigation skeleton

---
 .../Sidebar/SidebarNavigationSkeleton.tsx     | 49 +++++--------------
 1 file changed, 13 insertions(+), 36 deletions(-)

diff --git a/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx b/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
index 28d38e200..cf37bdb3c 100644
--- a/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
+++ b/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
@@ -1,3 +1,5 @@
+import { Fragment } from "react"
+
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
@@ -6,6 +8,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import styles from "./sidebar.module.css"
 
 export default function SidebarNavigationSkeleton() {
+  const skeletonWidths = ["8ch", "10ch", "9ch", "12ch", "24ch", "10ch", "8ch"]
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
@@ -14,42 +17,16 @@ export default function SidebarNavigationSkeleton() {
         </Subtitle>
         <Divider color="beige" />
         <ul className={styles.list}>
-          <li>
-            <Link href="" size={"regular"} variant="sidebar">
-              <SkeletonShimmer width={"8ch"} />
-            </Link>
-          </li>
-          <li>
-            <Link href="" size={"regular"} variant="sidebar">
-              <SkeletonShimmer width={"10ch"} />
-            </Link>
-          </li>
-          <li>
-            <Link href="" size={"regular"} variant="sidebar">
-              <SkeletonShimmer width={"9ch"} />
-            </Link>
-          </li>
-          <li>
-            <Link href="" size={"regular"} variant="sidebar">
-              <SkeletonShimmer width={"12ch"} />
-            </Link>
-          </li>
-          <Divider color="beige" />
-          <li>
-            <Link href="" size={"regular"} variant="sidebar">
-              <SkeletonShimmer width={"24ch"} />
-            </Link>
-          </li>
-          <li>
-            <Link href="" size={"regular"} variant="sidebar">
-              <SkeletonShimmer width={"10ch"} />
-            </Link>
-          </li>
-          <li>
-            <Link href="" size={"regular"} variant="sidebar">
-              <SkeletonShimmer width={"8ch"} />
-            </Link>
-          </li>
+          {skeletonWidths.map((width, index) => (
+            <Fragment key={index}>
+              {index === 4 && <Divider color="beige" />}
+              <li>
+                <Link href="" size="regular" variant="sidebar">
+                  <SkeletonShimmer width={width} />
+                </Link>
+              </li>
+            </Fragment>
+          ))}
         </ul>
       </nav>
     </aside>