improve loading state of course nav items

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

@@ -25,23 +25,25 @@
 </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 &&
+      !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}
+    {/if}
     <span class="grow" />
 
     {#if label === 'Lessons' && !isLoading}
@@ -54,10 +56,9 @@
       </IconButton>
     {/if}
   </button>
-    {#if isExpanded}
+  {#if isExpanded && !isLoading}
     <div in:slide out:slide class="flex flex-col">
       <slot />
     </div>
   {/if}
-  {/if}
 </div>