loading ring for scores table

Author: skand088

src/app/judging/JudgingTable.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import Skeleton from "react-loading-skeleton";
 
 import type { Schema } from "@/amplify/data/resource";
 import LoadingRing from "@/components/LoadingRing";
@@ -51,15 +50,16 @@ export default function JudgingTable({
         return teams;
       },
     });
-  const isFetching = roomIsFetching || teamsForRoomIsFetching;
+  const isFetching = roomIsFetching && teamsForRoomIsFetching;
   if (isFetching || !roomData || !teamsForRoomData) {
     return (
-      <div className="flex flex-1">
-        <Skeleton className="h-full" containerClassName="flex-1" />
+      <div>
+        <LoadingRing />
       </div>
     );
   }
   async function getFilteredTeamsCount() {
+    // https://medium.com/@debbs119/array-filter-and-array-map-with-async-functions-9636e1ae8d6e --> why it need to map to a boolean array first
     if (!teamsForRoomData) {
       return;
     }
@@ -72,21 +72,12 @@ export default function JudgingTable({
         );
       }),
     );
-
-    return teamsForRoomData?.filter((_, index) => boolArray[index]).length;
-  }
-
-  if (!teamsForRoomData) return;
-
-  async function updateTeamsLeft() {
-    const filteredCount = await getFilteredTeamsCount();
-    if (!filteredCount) {
-      return;
-    }
-    setTeamsLeft(filteredCount);
+    setTeamsLeft(
+      teamsForRoomData?.filter((_, index) => boolArray[index]).length,
+    );
   }
 
-  updateTeamsLeft();
+  getFilteredTeamsCount();
 
   const panelData = [
     {
@@ -115,32 +106,26 @@ export default function JudgingTable({
 
   return (
     <>
-      {isFetching ? (
-        <div className="flex h-screen w-full items-center justify-center">
-          <LoadingRing />
-        </div>
-      ) : (
-        <div className="flex w-full flex-col justify-center gap-4 py-6 xl:flex-row">
-          <div className=" flex w-full flex-row gap-4 xl:w-1/4 xl:flex-col">
-            {panelData.map((item, index) => (
-              <StatsPanel
-                key={index}
-                icon={item.icon}
-                alt={item.alt}
-                stat={item.stat}
-                subheader={item.text}
-              />
-            ))}
-          </div>
-          <ScoresTable
-            tableData={teamsForRoomData as Schema["Team"]["type"][]}
-            onCreateScoreClick={handleCreateScoreClick}
-            colorScheme="pink"
-            entriesPerPage={150}
-            hackathonData={hackathonData}
-          />
+      <div className="flex w-full flex-col justify-center gap-4 py-6 xl:flex-row">
+        <div className=" flex w-full flex-row gap-4 xl:w-1/4 xl:flex-col">
+          {panelData.map((item, index) => (
+            <StatsPanel
+              key={index}
+              icon={item.icon}
+              alt={item.alt}
+              stat={item.stat}
+              subheader={item.text}
+            />
+          ))}
         </div>
-      )}
+        <ScoresTable
+          tableData={teamsForRoomData as Schema["Team"]["type"][]}
+          onCreateScoreClick={handleCreateScoreClick}
+          colorScheme="pink"
+          entriesPerPage={150}
+          hackathonData={hackathonData}
+        />
+      </div>
 
       {selectedTeam !== "" && (
         <ModalPopup

src/components/Dashboard/Greetings.tsx

@@ -2,6 +2,8 @@
 
 import { twMerge } from "tailwind-merge";
 
+import LoadingRing from "@/components/LoadingRing";
+
 import { UserType, useUser } from "../contexts/UserContext";
 import Card from "./Card";
 
@@ -32,8 +34,10 @@ export default function Greetings({
         <h2 className="text-lg font-normal md:text-xl lg:text-2xl">
           Hack the Change 2024
         </h2>
+
         <h1 className="text-3xl md:text-4xl lg:text-6xl">
           Hello,
+          {user.isFetching && <LoadingRing />}
           <span className={`capitalize italic ${nameColor}`}>
             {" "}
             {firstName} {lastName}!

src/components/judging/ScoresTable.tsx

@@ -9,7 +9,6 @@ import { type Schema } from "@/amplify/data/resource";
 import { useQuery } from "@tanstack/react-query";
 
 import Card from "../Dashboard/Card";
-// import LoadingRing from "../LoadingRing";
 import { useUser } from "../contexts/UserContext";
 import { type ScoreObject } from "./ModalPopup";