From aaed83d3a025b2f097497c7f2dc98f97d1dbf26a Mon Sep 17 00:00:00 2001
From: Akalanka Perera <akalankaperera128@gmail.com>
Date: Tue, 17 Oct 2023 07:13:41 +0000
Subject: [PATCH] Fix: dashboard card loading states

---
 src/components/dashboard/card.jsx |  4 ++--
 src/pages/dashboard.jsx           | 15 ++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/dashboard/card.jsx b/src/components/dashboard/card.jsx
index 0706c09..b2433de 100644
--- a/src/components/dashboard/card.jsx
+++ b/src/components/dashboard/card.jsx
@@ -2,8 +2,8 @@ import { twMerge } from "tailwind-merge";
 import { Skeleton } from "@sliit-foss/bashaway-ui/components";
 import { Footnote } from "@sliit-foss/bashaway-ui/typography";
 
-const DashboardCard = ({ icon: Icon, title, value, className }) => {
-  if (value === undefined)
+const DashboardCard = ({ icon: Icon, title, value, className, loading = false }) => {
+  if (value === undefined || loading)
     return (
       <Skeleton
         containerClassName="flex w-full h-full max-h-[10.5rem]"
diff --git a/src/pages/dashboard.jsx b/src/pages/dashboard.jsx
index a4d6601..5eac02d 100644
--- a/src/pages/dashboard.jsx
+++ b/src/pages/dashboard.jsx
@@ -12,9 +12,9 @@ const Dashboard = () => {
 
   const { ghostLegion, toggleGhostLegion } = useGhostLegion();
 
-  const { data: { data: registrationInfo } = {} } = useGetRegistrationInfoQuery({ round, ghostLegion });
-  const { data: { data: questionSubmissionInfo } = {} } = useGetQuestionSubmissionsQuery({ round, ghostLegion });
-  const { data: { data: teamSubmissionInfo } = {} } = useGetTeamSubmissionsQuery({ round, ghostLegion });
+  const { data: { data: registrationInfo } = {}, isFetching: isRegistrationInfoFetching } = useGetRegistrationInfoQuery({ round, ghostLegion });
+  const { data: { data: questionSubmissionInfo } = {}, isFetching: isQuestionSubmissionsFetching } = useGetQuestionSubmissionsQuery({ round, ghostLegion });
+  const { data: { data: teamSubmissionInfo } = {}, isFetching: isTeamSubmissionsFetching } = useGetTeamSubmissionsQuery({ round, ghostLegion });
 
   useTitle("Dashboard | Bashaway");
 
@@ -30,15 +30,16 @@ const Dashboard = () => {
         <GhostLegion ghostLegion={ghostLegion} toggleGhostLegion={toggleGhostLegion} round={round} />
       </div>
       <div className="w-full h-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 justify-start items-start gap-5">
-        <DashboardCard icon={Building} title="Universities" value={registrationInfo?.university_counts?.length} />
-        <DashboardCard icon={Users} title="Teams" value={registrationInfo?.total_registrations} />
-        <DashboardCard icon={Users2} title="Individuals" value={registrationInfo?.total_members} />
-        <DashboardCard icon={Folder} title="Submissions" value={totalSubmissions} />
+        <DashboardCard icon={Building} title="Universities" value={registrationInfo?.university_counts?.length} loading={isRegistrationInfoFetching}/>
+        <DashboardCard icon={Users} title="Teams" value={registrationInfo?.total_registrations} loading={isRegistrationInfoFetching}/>
+        <DashboardCard icon={Users2} title="Individuals" value={registrationInfo?.total_members} loading={isRegistrationInfoFetching}/>
+        <DashboardCard icon={Folder} title="Submissions" value={totalSubmissions} loading={isQuestionSubmissionsFetching}/>
         <DashboardCard
           className="col-span-2 md:col-span-1"
           icon={UserGroup}
           title="Teams Submitted"
           value={teamSubmissionInfo?.length}
+          loading={isTeamSubmissionsFetching}
         />
       </div>
       <Title>Statistics</Title>