CLASSROOMIO-T-142: Add Skeleton Loader for Community

CLASSROOMIO-T-142: Code Review Fix

CLASSROOMIO-T-142: Code Review

CLASSROOMIO-T-142: Resolved Feedbacks

Merge branch 'main' into CLASSROOMIO-T-142

CLASSROOMIO-T-142: Skeleton Loader for Community

CLASSROOMIO-T-142: Create Community Loader


Co-authored-by: Tunji Adeyemi <[email protected]>


Merge-request: CLASSROOMIO-MR-67
Merged-by: Best Admin <[email protected]>

src/lib/components/Org/Community/Loader.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
+</script>
+
+<div
+  class="h-[70px] w-full border border-gray-100 dark:bg-gray-700 mr-4 mb-4 mt-2 rounded-md transition ease-in-out relative flex pt-3 px-3"
+>
+  <div class="w-10 flex justify-evenly flex-col px-1 mr-2 rounded-md">
+    <SkeletonPlaceholder style="width: 100%; height: 40%; border-radius: 4px;" />
+    <SkeletonPlaceholder style="width: 100%; height: 40%; border-radius: 4px;" />
+  </div>
+
+  <div class="w-9/12 mt-1.5 flex justify-evenly flex-col rounded-md">
+    <!-- first text -->
+    <div class="w-3/6 h-full">
+      <SkeletonText style="height: 50%; border-radius: 4px;" />
+    </div>
+    <!-- second text -->
+    <SkeletonText style="width: 10%; height: 50%; border-radius: 4px;" />
+  </div>
+
+  <div class="w-10 justify-evenly flex-col px-1 mt-1.5 ml-auto rounded-md">
+    <SkeletonPlaceholder style="width: 100%; height: 41%; border-radius: 4px;" />
+  </div>
+</div>

src/lib/components/Org/Community/index.svelte

@@ -3,6 +3,7 @@
   import dayjs from 'dayjs';
   import relativeTime from 'dayjs/plugin/relativeTime';
   import AddCommentIcon from 'carbon-icons-svelte/lib/AddComment.svelte';
+  import CommunityLoader from './Loader.svelte';
   import Vote from '$lib/components/Vote/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
   import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
@@ -12,12 +13,14 @@
 
   export let isLMS = false;
 
+  let isLoading = false;
   let discussions = [];
 
   dayjs.extend(relativeTime);
 
   async function fetchCommunityQuestions(orgId) {
     if (!orgId) return;
+    isLoading = true;
 
     const { data, error } = await supabase
       .from('community_question')
@@ -37,6 +40,7 @@
       .eq('organization_id', orgId);
     console.log('data', data);
     console.log('error', error);
+    isLoading = false;
 
     if (error) {
       console.error('Error loading community', error);
@@ -60,6 +64,12 @@
 <div
   class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-gray-700"
 >
+  {#if isLoading}
+    <CommunityLoader />
+    <CommunityLoader />
+    <CommunityLoader />
+    <CommunityLoader />
+  {:else}
     {#each discussions as discussion}
       <div class="w-full flex border-bottom-c p-5">
         <Vote value={discussion.votes} />
@@ -89,6 +99,7 @@
         <p class="dark:text-white w-1/3 text-center">Ask a question to the community</p>
       </Box>
     {/each}
+  {/if}
 </div>
 
 <style>