chore: loading state to submission

apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte

@@ -3,6 +3,7 @@
   import { dndzone } from 'svelte-dnd-action';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
+  import { SkeletonPlaceholder } from 'carbon-components-svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
@@ -45,6 +46,7 @@
   let submissionId: string;
   let openExercise = false;
   let isGradeWithAI = false;
+  let fetching = false;
 
   const submissionStatus: { [key: number]: string } = {
     1: $t('course.navItem.submissions.submission_status.submitted'),
@@ -268,6 +270,7 @@
   }
 
   async function firstRender(courseId: string) {
+    fetching = true;
     const { data: submissions } = await fetchSubmissions(courseId);
     const sectionById: { [key: number]: SubmissionSection[] } = {};
 
@@ -332,6 +335,7 @@
       value: Array.isArray(sectionById[index + 1]) ? sectionById[index + 1].length : 0,
       items: Array.isArray(sectionById[index + 1]) ? sectionById[index + 1] : []
     }));
+    fetching = false;
   }
 
   $: browser && $course.id && firstRender($course.id);
@@ -367,6 +371,11 @@
               <Chip value={items.length} className="bg-set dark:bg-neutral-800" />
               <p class="dark:text-white ml-2 font-bold">{title}</p>
             </div>
+            {#if fetching}
+              <SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
+              <SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
+              <SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
+            {:else}
               <div
                 class="content pr-2 overflow-y-auto mb-3"
                 use:dndzone={{
@@ -424,6 +433,7 @@
                   </div>
                 {/each}
               </div>
+            {/if}
           </div>
         {/each}
       </div>