change loading rings and fix registration loading (#205)

Author: skand088

src/app/login/page.tsx

@@ -1,6 +1,17 @@
-import Login from "@/components/LoginForm/Login";
+import dynamic from "next/dynamic";
+
+import KevinLoadingRing from "@/components/KevinLoadingRing";
 import RegistrationLayout from "@/components/layouts/RegistrationLayout";
 
+const Login = dynamic(() => import("@/components/LoginForm/Login"), {
+  ssr: false,
+  loading: () => (
+    <div className="mt-16 flex w-full items-center justify-center">
+      <KevinLoadingRing />
+    </div>
+  ),
+});
+
 export default function LoginPage() {
   return (
     <RegistrationLayout>

src/app/participant/profile/page.tsx

@@ -1,11 +1,17 @@
 import dynamic from "next/dynamic";
 
+import KevinLoadingRing from "@/components/KevinLoadingRing";
+
 // Dynamically import UserProfile with preloading
 const UserProfile = dynamic(
   () => import("@/components/UserProfile/UserProfile"),
   {
     ssr: false,
-    loading: () => <p>Loading user profile...</p>,
+    loading: () => (
+      <div className="flex w-full items-center justify-center">
+        <KevinLoadingRing />
+      </div>
+    ),
   },
 );
 

src/components/KevinLoadingRing.tsx

@@ -12,10 +12,10 @@ export default function KevinLoadingRing() {
           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-1 animate-pulse rounded-full bg-dark-pink delay-200"></span>
-          <span className="delay-400 mt-3 size-1 animate-pulse rounded-full bg-dark-pink"></span>
-          <span className="delay-600 mt-3 size-1 animate-pulse rounded-full bg-dark-pink"></span>
+          <span className="font-semibold text-gray-700">Loading</span>
+          <span className=" mt-3 size-1 animate-pulse rounded-full bg-gray-700 delay-200"></span>
+          <span className="delay-400 mt-3 size-1 animate-pulse rounded-full bg-gray-700"></span>
+          <span className="delay-600 mt-3 size-1 animate-pulse rounded-full bg-gray-700"></span>
         </div>
       </div>
     </>

src/components/LoadingRing.tsx

@@ -10,7 +10,7 @@ import FormFieldsHeader from "@/components/LoginForm/FormFieldsHeader";
 import { Flex, Input, Label, SelectField } from "@aws-amplify/ui-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 
-import LoadingRing from "../LoadingRing";
+import KevinLoadingRing from "../KevinLoadingRing";
 import { UserType, useUser } from "../contexts/UserContext";
 
 export default function PersonalFormFields({ user }: { user: AuthUser }) {
@@ -91,8 +91,14 @@ export default function PersonalFormFields({ user }: { user: AuthUser }) {
       setFormState((prevState) => ({ ...prevState, [name]: value }));
     }
   };
+
+  console.log(isPending);
   if (isPending) {
-    return <LoadingRing />;
+    return (
+      <div className="mt-16 flex w-full items-center justify-center">
+        <KevinLoadingRing />
+      </div>
+    );
   }
   if (isError) {
     return <div>Error, please try again later.</div>;

src/components/LoginForm/PersonalFormFields.tsx

@@ -8,7 +8,7 @@ import { QRCode } from "react-qrcode-logo";
 import { type Schema } from "@/amplify/data/resource";
 import { createMessageAndCode } from "@/amplify/function/BusinessLogic/utils/crytography";
 import { getUpcomingFoodEventDetails } from "@/app/get-food-ticket/actions";
-import LoadingRing from "@/components/LoadingRing";
+import KevinLoadingRing from "@/components/KevinLoadingRing";
 import { UserType, useUser } from "@/components/contexts/UserContext";
 import { useQuery } from "@tanstack/react-query";
 
@@ -114,7 +114,7 @@ export default function UserFoodTicket() {
     <>
       {isFetching ? (
         <div className="flex h-screen w-full items-center justify-center bg-fuzzy-peach">
-          <LoadingRing />
+          <KevinLoadingRing />
         </div>
       ) : (
         <div className="flex size-full flex-col items-center bg-fuzzy-peach">

src/components/UserProfile/FoodTicket.tsx

@@ -2,7 +2,7 @@
 
 import { type Schema } from "@/amplify/data/resource";
 import { client } from "@/app/QueryProvider";
-import LoadingRing from "@/components/LoadingRing";
+import KevinLoadingRing from "@/components/KevinLoadingRing";
 import TeamForm from "@/components/UserProfile/TeamForm";
 import { useUser } from "@/components/contexts/UserContext";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -54,7 +54,7 @@ const TeamProfile = () => {
     <>
       {isFetching || !userTeamId ? (
         <div className="flex h-screen w-full items-center justify-center bg-fuzzy-peach">
-          <LoadingRing />
+          <KevinLoadingRing />
         </div>
       ) : (
         <>

src/components/UserProfile/TeamProfile.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 
 import { type Schema } from "@/amplify/data/resource";
 import { client } from "@/app/QueryProvider";
-import LoadingRing from "@/components/LoadingRing";
+import KevinLoadingRing from "@/components/KevinLoadingRing";
 import UserForm from "@/components/UserProfile/UserForm";
 import { useUser } from "@/components/contexts/UserContext";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -87,8 +87,8 @@ const UserProfile = () => {
     <div>
       {" "}
       {isFetching || userContextIsFetching ? (
-        <div className="flex h-screen w-full items-center justify-center bg-fuzzy-peach">
-          <LoadingRing />
+        <div className="flex w-full items-center justify-center">
+          <KevinLoadingRing />
         </div>
       ) : (
         <div className="flex w-full flex-col bg-fuzzy-peach">

src/components/UserProfile/UserProfile.tsx

@@ -10,7 +10,7 @@ import type { Schema } from "@/amplify/data/resource";
 import { Button, CheckboxField, Input, Label } from "@aws-amplify/ui-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 
-import LoadingRing from "../LoadingRing";
+import KevinLoadingRing from "../KevinLoadingRing";
 
 const client = generateClient<Schema>();
 export default function ResetPage() {
@@ -113,9 +113,12 @@ export default function ResetPage() {
     name: "scoringSidepots",
   });
 
-  if (hackathonData.isPending) return <LoadingRing />;
-
-  if (userMutation.isPending) return <LoadingRing />;
+  if (hackathonData.isPending || userMutation.isPending)
+    return (
+      <div className="mt-16 flex w-full items-center justify-center">
+        <KevinLoadingRing />
+      </div>
+    );
 
   if (userMutation.isError) return <div>Error, please try again later.</div>;
 

src/components/reset/ResetPage.tsx

@@ -3,7 +3,7 @@
 import { client } from "@/app/QueryProvider";
 import { useQuery } from "@tanstack/react-query";
 
-import LoadingRing from "../LoadingRing";
+import KevinLoadingRing from "../KevinLoadingRing";
 
 export default function TeamInformation({
   state = "Registered",
@@ -19,7 +19,12 @@ export default function TeamInformation({
     },
   });
   const teamName = data?.name ?? "Unknown";
-  if (isPending) return <LoadingRing />;
+  if (isPending)
+    return (
+      <div className="mt-4">
+        <KevinLoadingRing />
+      </div>
+    );
   if (state === "Joined")
     return (
       <div className=" flex flex-col gap-4 text-center text-5xl font-bold">