Merge pull request #18 from sliit-foss/development

Fix: dashboard card loading states
sliit-foss · Oct 17, 2023 · 21b9829 · 21b9829
2 parents aed54b8 + aaed83d
commit 21b9829
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -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>