From f81a3fde9e8ec8dcdf654d2f8d11ee1cb9c81ce2 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Mon, 11 Dec 2023 21:32:41 +0300
Subject: [PATCH] improve loading state of course nav items

---
 .../Navigation/NavExpandable.svelte           | 59 ++++++++++---------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte b/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte
index 45de3018..15551220 100644
--- a/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte
@@ -25,39 +25,40 @@
 </script>
 
 <div class="">
-  {#if isLoading}
-    <div class="w-11/12 mx-auto">
-      <SkeletonText class="py-3 px-4 mb-3 rounded-md" style="height: 40px;" />
-    </div>
-  {:else}
-    <button
-      class="item relative flex items-center py-3 px-4 ml-2 mb-1 {NavClasses.item} {isGroupActive &&
-        NavClasses.active} w-[95%]"
-      tabindex="0"
-      on:click={onClick}
-      disabled={isLoading}
-    >
-      <NavIcons name={label} />
+  <button
+    class="item relative flex items-center py-3 px-4 ml-2 mb-1 {NavClasses.item} {isGroupActive &&
+      !isLoading &&
+      NavClasses.active} w-[95%]"
+    tabindex="0"
+    on:click={onClick}
+    disabled={isLoading}
+  >
+    <NavIcons name={label} />
+    {#if isLoading}
+      <div class="w-11/12 mx-auto">
+        <SkeletonText class="rounded-md" style="margin: 0px; height: 30px;" />
+      </div>
+    {:else}
       <span class="font-bold text-md">{label}</span>
       {#if total}
         <span class="ml-1">({total})</span>
       {/if}
-      <span class="grow" />
-
-      {#if label === 'Lessons' && !isLoading}
-        <IconButton size="small" stopPropagation={true} onClick={toggleIsExpanded}>
-          {#if isExpanded}
-            <ChevronUpIcon class="carbon-icon dark:text-white" />
-          {:else}
-            <ChevronDownIcon class="carbon-icon dark:text-white" />
-          {/if}
-        </IconButton>
-      {/if}
-    </button>
-    {#if isExpanded}
-      <div in:slide out:slide class="flex flex-col">
-        <slot />
-      </div>
     {/if}
+    <span class="grow" />
+
+    {#if label === 'Lessons' && !isLoading}
+      <IconButton size="small" stopPropagation={true} onClick={toggleIsExpanded}>
+        {#if isExpanded}
+          <ChevronUpIcon class="carbon-icon dark:text-white" />
+        {:else}
+          <ChevronDownIcon class="carbon-icon dark:text-white" />
+        {/if}
+      </IconButton>
+    {/if}
+  </button>
+  {#if isExpanded && !isLoading}
+    <div in:slide out:slide class="flex flex-col">
+      <slot />
+    </div>
   {/if}
 </div>