chore: implement loading skeleton for match section during data fetching

tructn · Dec 22, 2024 · 242d093 · 242d093
1 parent fde140b
commit 242d093
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/frontend/src/screens/dashboard/match-section.tsx b/frontend/src/screens/dashboard/match-section.tsx
@@ -1,8 +1,8 @@
+import { Skeleton } from "@mantine/core";
 import React from "react";
 import { IoPlanetOutline } from "react-icons/io5";
 import { MatchSummaryModel } from "../../models";
 import MatchList from "./match-list";
-import { Skeleton } from "@mantine/core";
 
 interface Props {
   title: string;
@@ -19,18 +19,31 @@ const MatchSection: React.FC<Props> = ({
   icon,
   expandFirstItem,
 }) => {
+  const LoadingSkeleton = () => (
+    <div className="flex items-center gap-2">
+      <div>
+        <Skeleton height={30} circle />
+      </div>
+      <Skeleton height={30} className="w-2/12" radius={100} />
+      <Skeleton height={30} className="w-3/12" radius={100} />
+      <Skeleton height={30} className="w-1/12" radius={100} />
+      <Skeleton height={30} className="w-full" radius={100} />
+      <Skeleton height={30} className="w-2/12" radius={100} />
+    </div>
+  );
+
   return (
     <div className="flex flex-col gap-2">
       <div className="flex items-center space-x-2 text-lg font-bold">
         {icon || <IoPlanetOutline />}
         <h3>{title}</h3>
       </div>
       {isLoading && (
-        <div className="flex items-center gap-2">
-          <Skeleton height={40} className="w-1/5" />
-          <Skeleton height={40} className="w-2/5" />
-          <Skeleton height={40} />
-        </div>
+        <>
+          <LoadingSkeleton />
+          <LoadingSkeleton />
+          <LoadingSkeleton />
+        </>
       )}
       {matches && (
         <MatchList matches={matches} expandFirstItem={expandFirstItem} />