chore(qol): add loading and error component to maintain modularity

a2ys · a2ys · commit 4d1ec0424292 · 2025-02-25T01:29:32.000+05:30
diff --git a/app/allusers/page.tsx b/app/allusers/page.tsx
@@ -10,6 +10,7 @@ import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
 import { User } from "@/types";
 import Error from "@/components/ui/Error";
+import Loading from "@/components/ui/Loading";
 
 const Page = () => {
   const [users, setUsers] = useState<User[]>([]);
@@ -96,11 +97,7 @@ const Page = () => {
   };
 
   if (isLoading) {
-    return (
-      <div className="flex justify-center items-center h-screen bg-[#09090b]">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-400" />
-      </div>
-    );
+    return <Loading />;
   }
 
   if (error) {
diff --git a/app/createTeam/page.tsx b/app/createTeam/page.tsx
@@ -9,14 +9,15 @@ import { useRouter } from "next/navigation";
 import api from "@/api";
 import { useAuth } from "@/context/AuthContext";
 import axios from "axios";
+import Loading from "@/components/ui/Loading";
 
 const CreateTeamPage: React.FC = () => {
   const [name, setName] = useState("");
   const [imageId, setImageID] = useState("");
   const [error, setError] = useState("");
 
   const router = useRouter();
-  const { user, getUser } = useAuth();
+  const { user, loading, getUser } = useAuth();
 
   useEffect(() => {
     if (user?.teamId) {
@@ -53,6 +54,10 @@ const CreateTeamPage: React.FC = () => {
     }
   };
 
+  if (loading) {
+    return <Loading />;
+  }
+
   return (
     <div className="bg-[#09090b] w-full h-screen flex flex-col text-white">
       <header className="w-full bg-[#121212] flex items-center justify-between px-6 py-3 border-b border-gray-700">
diff --git a/app/createproject/page.tsx b/app/createproject/page.tsx
@@ -10,6 +10,7 @@ import Link from "next/link";
 import api from "@/api";
 import axios from "axios";
 import { Project } from "@/types";
+import Loading from "@/components/ui/Loading";
 
 const CreateProjectPage: React.FC = () => {
   const [name, setName] = useState("");
@@ -105,11 +106,7 @@ const CreateProjectPage: React.FC = () => {
   };
 
   if (isLoading) {
-    return (
-      <div className="bg-[#09090b] w-full h-screen flex items-center justify-center">
-        <p className="text-white">Loading...</p>
-      </div>
-    );
+    return <Loading />;
   }
 
   return (
diff --git a/app/project/page.tsx b/app/project/page.tsx
@@ -12,6 +12,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import React, { useState, useEffect } from "react";
 import { Project } from "@/types";
+import Loading from "@/components/ui/Loading";
 
 const Profile = () => {
   const { user, loading, getUser } = useAuth();
@@ -55,11 +56,7 @@ const Profile = () => {
   };
 
   if (loading) {
-    return (
-      <div className="flex justify-center items-center h-screen bg-[#121212]">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-400" />
-      </div>
-    );
+    return <Loading />;
   }
 
   return (
diff --git a/app/promoteUser/[userId]/page.tsx b/app/promoteUser/[userId]/page.tsx
@@ -5,6 +5,7 @@ import Button from "@/components/ui/Button";
 import DangerButton from "@/components/ui/DangerButton";
 import DialogBox from "@/components/ui/DialogBox";
 import InputField from "@/components/ui/InputField";
+import Loading from "@/components/ui/Loading";
 import { useAuth } from "@/context/AuthContext";
 import axios from "axios";
 import Link from "next/link";
@@ -97,6 +98,10 @@ const DynamicPromoteUser = ({
     }
   };
 
+  if (loading) {
+    return <Loading />;
+  }
+
   return (
     <div className="bg-[#09090b] w-full h-screen flex flex-col">
       <header className="w-full bg-[#121212] text-white flex items-center justify-between px-6 py-3 border-b border-gray-700">
diff --git a/app/team/page.tsx b/app/team/page.tsx
@@ -13,6 +13,7 @@ import React, { useEffect, useState } from "react";
 import DangerButton from "@/components/ui/DangerButton";
 import { useRouter } from "next/navigation";
 import { Team, Project } from "@/types";
+import Loading from "@/components/ui/Loading";
 
 const TeamPage = () => {
   const [response, setResponse] = useState<Team | null>(null);
@@ -115,11 +116,7 @@ const TeamPage = () => {
   };
 
   if (loading) {
-    return (
-      <div className="flex justify-center items-center h-screen bg-[#09090b]">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-300" />
-      </div>
-    );
+    return <Loading />;
   }
 
   if (error || !response) {
diff --git a/app/updateProject/page.tsx b/app/updateProject/page.tsx
@@ -9,6 +9,8 @@ import api from "@/api";
 import axios from "axios";
 import DangerButton from "@/components/ui/DangerButton";
 import DialogBox from "@/components/ui/DialogBox";
+import Loading from "@/components/ui/Loading";
+import Error from "@/components/ui/Error";
 
 const UpdateProject = () => {
   const [projectId, setProjectId] = useState("");
@@ -64,18 +66,12 @@ const UpdateProject = () => {
   }, [router, user?.teamId]);
 
   if (loading || !user) {
-    return (
-      <div className="flex justify-center items-center h-screen bg-[#121212]">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-400" />
-      </div>
-    );
+    return <Loading />;
   }
 
   if (user && !user.isLeader) {
     return (
-      <div className="flex justify-center items-center h-screen bg-[#09090b] text-red-400">
-        You are not allowed to do this action.
-      </div>
+      <Error error="You are not allowed to update projects. Only team leaders can update projects." />
     );
   }
 
diff --git a/app/user/[id]/page.tsx b/app/user/[id]/page.tsx
@@ -14,6 +14,8 @@ import DialogBox from "@/components/ui/DialogBox";
 import { useRouter } from "next/navigation";
 import { User } from "@/types";
 import { useAuth } from "@/context/AuthContext";
+import Loading from "@/components/ui/Loading";
+import Error from "@/components/ui/Error";
 
 type ProfileProps = {
   params: Promise<{
@@ -142,18 +144,12 @@ const Profile = ({ params }: ProfileProps) => {
   }, [visitedUser]);
 
   if (loading) {
-    return (
-      <div className="flex justify-center items-center h-screen bg-[#121212]">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-400" />
-      </div>
-    );
+    return <Loading />;
   }
 
   if (!visitedUser) {
     return (
-      <div className="flex justify-center items-center h-screen bg-[#121212] text-white text-lg font-semibold">
-        User not found
-      </div>
+      <Error error="User not found. Please check the URL and try again." />
     );
   }
 
diff --git a/app/user/page.tsx b/app/user/page.tsx
@@ -3,7 +3,9 @@
 
 import api from "@/api";
 import DangerButton from "@/components/ui/DangerButton";
+import Error from "@/components/ui/Error";
 import FooterSection from "@/components/ui/FooterSection";
+import Loading from "@/components/ui/Loading";
 import UserCard from "@/components/user/UserCard";
 import UserInformation from "@/components/user/UserInformation";
 import { useAuth } from "@/context/AuthContext";
@@ -33,18 +35,12 @@ const Profile = () => {
   }, [user]);
 
   if (loading) {
-    return (
-      <div className="flex justify-center items-center h-screen bg-[#121212]">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-400" />
-      </div>
-    );
+    return <Loading />;
   }
 
   if (!user) {
     return (
-      <div className="flex justify-center items-center h-screen bg-[#121212] text-white">
-        User not found
-      </div>
+      <Error error="You are not logged in. Please log in to view your profile." />
     );
   }
 
