improve loading state of course nav items

apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte

@@ -25,39 +25,40 @@
 </script>
 
 <div class="">
-  {#if isLoading}
+  <button
-    <div class="w-11/12 mx-auto">
+    class="item relative flex items-center py-3 px-4 ml-2 mb-1 {NavClasses.item} {isGroupActive &&
-      <SkeletonText class="py-3 px-4 mb-3 rounded-md" style="height: 40px;" />
+      !isLoading &&
-    </div>
+      NavClasses.active} w-[95%]"
-  {:else}
+    tabindex="0"
-    <button
+    on:click={onClick}
-      class="item relative flex items-center py-3 px-4 ml-2 mb-1 {NavClasses.item} {isGroupActive &&
+    disabled={isLoading}
-        NavClasses.active} w-[95%]"
+  >
-      tabindex="0"
+    <NavIcons name={label} />
-      on:click={onClick}
+    {#if isLoading}
-      disabled={isLoading}
+      <div class="w-11/12 mx-auto">
-    >
+        <SkeletonText class="rounded-md" style="margin: 0px; height: 30px;" />
-      <NavIcons name={label} />
+      </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>