[DONE] clone a course

src/components/Courses/index.svelte

@@ -1,22 +1,33 @@
 <script>
   import Box from '../Box/index.svelte';
+  import { Firework } from 'svelte-loading-spinners';
   import Card from './components/Card/index.svelte';
-  import { courses } from './store';
+  import CopyCourseModal from './components/CopyCourseModal/index.svelte';
+  import { courses, courseMetaDeta } from './store';
 </script>
 
+<CopyCourseModal />
+
 <div
   class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto"
 >
-  {#each $courses as courseData}
-    <Card
-      id={courseData.id}
-      logo={courseData.logo}
-      title={courseData.title}
-      description={courseData.description}
-    />
-  {:else}
+  {#if $courseMetaDeta.isLoading}
     <Box>
-      <h3 class="text-2xl text-gray-500">No Course Assigned</h3>
+      <Firework size="60" color="#1d4ed8" unit="px" duration="1s" />
     </Box>
-  {/each}
+  {:else}
+    {#each $courses as courseData}
+      <Card
+        id={courseData.id}
+        logo={courseData.logo}
+        title={courseData.title}
+        description={courseData.description}
+        role_id={courseData.role_id}
+      />
+    {:else}
+      <Box>
+        <h3 class="text-2xl text-gray-500">No Course Assigned</h3>
+      </Box>
+    {/each}
+  {/if}
 </div>