kevin loading component

Author: skand088

src/app/judging/JudgingTable.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import Image from "next/image";
 import { useState } from "react";
 
 import type { Schema } from "@/amplify/data/resource";
-import LoadingRing from "@/components/LoadingRing";
+import KevinLoadingRing from "@/components/KevinLoadingRing";
 import { useUser } from "@/components/contexts/UserContext";
 import ModalPopup from "@/components/judging/ModalPopup";
 import ScoresTable from "@/components/judging/ScoresTable";
@@ -53,23 +52,10 @@ export default function JudgingTable({
     });
   const isFetching = roomIsFetching && teamsForRoomIsFetching;
   if (isFetching || !roomData || !teamsForRoomData) {
-    return (
-      <div className="m-4 flex h-full flex-col justify-center">
-        <div className="-ml-4 flex justify-center">
-          <LoadingRing />
-        </div>
-
-        <Image
-          src="/svgs/admin/Kevin.svg"
-          alt="Kevin Icon"
-          width={240}
-          height={240}
-        />
-      </div>
-    );
+    return <KevinLoadingRing />;
   }
   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
+    // https://medium.com/@debbs119/array-filter-and-array-map-with-async-functions-9636e1ae8d6e --> why it needs to map to a boolean array first
     if (!teamsForRoomData) {
       return;
     }

src/components/Dashboard/Greetings.tsx

@@ -2,8 +2,6 @@
 
 import { twMerge } from "tailwind-merge";
 
-import LoadingRing from "@/components/LoadingRing";
-
 import { UserType, useUser } from "../contexts/UserContext";
 import Card from "./Card";
 
@@ -37,7 +35,12 @@ export default function Greetings({
 
         <h1 className="text-3xl md:text-4xl lg:text-6xl">
           Hello,
-          {user.isFetching && <LoadingRing />}
+          {user.isFetching && (
+            <span className={`capitalize italic ${nameColor}`}>
+              {" "}
+              Loading...
+            </span>
+          )}
           <span className={`capitalize italic ${nameColor}`}>
             {" "}
             {firstName} {lastName}!

src/components/KevinLoadingRing.tsx

@@ -0,0 +1,28 @@
+import Image from "next/image";
+
+import LoadingRing from "@/components/LoadingRing";
+
+export default function KevinLoadingRing() {
+  return (
+    <>
+      <div className="m-4 flex h-full flex-col justify-center text-center text-2xl">
+        <div className="-ml-4 mb-16 flex justify-center">
+          <LoadingRing />
+        </div>
+        <Image
+          className="animate-bounce"
+          src="/svgs/admin/Kevin.svg"
+          alt="Kevin Icon"
+          width={240}
+          height={240}
+        />
+        <div className="ml-2 flex w-full items-center justify-center space-x-1">
+          <span className="text-dark-pink">Loading</span>
+          <span className=" mt-3 size-2 animate-pulse rounded-full bg-dark-pink delay-200"></span>
+          <span className="delay-400 mt-3 size-2 animate-pulse rounded-full bg-dark-pink"></span>
+          <span className="delay-600 mt-3 size-2 animate-pulse rounded-full bg-dark-pink"></span>
+        </div>
+      </div>
+    </>
+  );
+}