feat(ui): Add loading skeleton to student submissions in the grading tab

Author: PedroChaparro

src/screens/edit-student-grade/components/grading-sidebar/submissions/GradingSubmissionsSummary.tsx

@@ -1,5 +1,6 @@
 import { CustomError } from "@/components/CustomError";
 import { EmptyContentText } from "@/components/EmptyContentText";
+import { StudentSubmissionsSkeleton } from "@/screens/edit-student-grade/skeletons/StudentSubmissionsSkeleton";
 import { getProgressOfStudentService } from "@/services/laboratories/ger-progress-of-student.service";
 import { useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
@@ -42,8 +43,7 @@ export const GradingSubmissionsSummary = ({
 
   // Handle loading state
   if (isLoadingSubmissionsSummary) {
-    // TODO: Replace this with a proper loading component
-    return <div>Loading...</div>;
+    return <StudentSubmissionsSkeleton />;
   }
 
   // Handle error state

src/screens/edit-student-grade/skeletons/StudentSubmissionSummaryCardSkeleton.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const StudentSubmissionSummaryCardSkeleton = () => {
+  return (
+    <div className="flex flex-wrap justify-between gap-2 rounded-md border p-4 shadow-sm">
+      <div className="flex flex-col gap-2">
+        <Skeleton className="h-6 w-24" />
+        <span className="flex items-center gap-1 capitalize text-black/75">
+          <Skeleton className="h-3 w-3 rounded-full" />
+          <Skeleton className="h-5 w-12" />
+        </span>
+      </div>
+      <div className="flex items-center">
+        <Skeleton className="h-10 w-10" />
+      </div>
+    </div>
+  );
+};

src/screens/edit-student-grade/skeletons/StudentSubmissionsSkeleton.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+import { StudentSubmissionSummaryCardSkeleton } from "./StudentSubmissionSummaryCardSkeleton";
+
+const submissionCardsToRender = Array.from({ length: 3 }, (_, index) => index);
+
+export const StudentSubmissionsSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <Skeleton className="h-7 w-1/3" />
+      <Skeleton className="h-12 w-full" />
+      <ul className="flex flex-col gap-4">
+        {submissionCardsToRender.map((_, index) => (
+          <li key={`student-submission-skeleton-${index}`}>
+            <StudentSubmissionSummaryCardSkeleton />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};