feat: #38 add loaders and error handling to Profile and Badge list

frontend/package.json

@@ -41,6 +41,7 @@
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.62.0",
     "react-router-dom": "^7.9.1",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13",
     "viem": "^2.37.5",
@@ -52,6 +53,7 @@
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/react-icons": "^2.2.7",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
     "@wagmi/core": "^2.20.3",

frontend/src/components/badges/BadgesList.tsx

@@ -14,9 +14,11 @@ import type { Badge } from "@/lib/types/badges";
 import { Search } from "lucide-react";
 import { CreateBadgeButton } from "@/components/badges/CreateBadgeButton";
 import { Input } from "../ui/input";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import ErrorDisplay from "@/components/displayError/index";
 
 export function BadgesList(): React.ReactElement {
-  const { data, isLoading } = useGetBadges();
+  const { data, isLoading, error } = useGetBadges();
   const [searchQuery, setSearchQuery] = useState("");
   const list = (data && data.length > 0 ? data : HARD_CODED_BADGES) as Badge[];
 
@@ -27,42 +29,53 @@ export function BadgesList(): React.ReactElement {
   }, [list, searchQuery]);
 
   if (isLoading) {
-    return <div className="mx-auto w-full max-w-5xl p-4">Loading badges…</div>;
+    return (
+      <div className="flex justify-start">
+        <AiOutlineLoading3Quarters className="h-10 w-10 animate-spin" />
+      </div>
+    );
   }
+
   return (
-    <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <div className="flex gap-4 items-center pb-8">
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
-          <Input
-            type="text"
-            placeholder="Search badges..."
-            className="pl-10"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
+    <>
+      {error ? (
+        <ErrorDisplay error={error} />
+      ) : (
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="flex gap-4 items-center pb-8">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+              <Input
+                type="text"
+                placeholder="Search badges..."
+                className="pl-10"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
 
-        <CreateBadgeButton />
-      </div>
+            <CreateBadgeButton />
+          </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {filtered.map((badge) => (
-          <Card key={badge.name}>
-            <CardHeader>
-              <CardTitle>
-                <div className="flex items-center">
-                  <BadgeCheck className="h-4 w-4 mr-2" />
-                  {badge.name}
-                </div>
-              </CardTitle>
-              <CardDescription>{badge.description}</CardDescription>
-            </CardHeader>
-            <CardContent />
-          </Card>
-        ))}
-      </div>
-    </main>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filtered.map((badge) => (
+              <Card key={badge.name}>
+                <CardHeader>
+                  <CardTitle>
+                    <div className="flex items-center">
+                      <BadgeCheck className="h-4 w-4 mr-2" />
+                      {badge.name}
+                    </div>
+                  </CardTitle>
+                  <CardDescription>{badge.description}</CardDescription>
+                </CardHeader>
+                <CardContent />
+              </Card>
+            ))}
+          </div>
+        </main>
+      )}
+    </>
   );
 }
 

frontend/src/components/displayError/index.tsx

@@ -0,0 +1,14 @@
+type ErrorDisplayProps = {
+  error: any;
+};
+
+export default function ErrorDisplay({ error }: ErrorDisplayProps) {
+  if (!error) return null; 
+
+  return (
+    <p className="text-2xl text-yellow-600 flex items-center gap-2">
+      <span>⚠️</span>
+      {"An error occurred, please try again later or contact support on discord"}
+    </p>
+  );
+}

frontend/src/components/profiles/list/ProfilesList.tsx

@@ -7,6 +7,8 @@ import type { Profile } from "@/lib/types/profiles";
 import { useMemo, useState } from "react";
 import { useGetAttestations } from "@/hooks/attestations/use-get-attestations";
 import { Input } from "../../ui/input";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import ErrorDisplay from "@/components/displayError/index";
 
 export function ProfilesList() {
   const { data, isLoading, error } = useGetProfiles();
@@ -16,13 +18,13 @@ export function ProfilesList() {
   const baseProfiles: Profile[] =
     data && data.length > 0
       ? data.map((p) => ({
-        address: p.address,
-        name: p.name || "",
-        description: p.description || "",
-        githubLogin: p.github_login,
-        attestationCount: 0,
-        attestations: [],
-      }))
+          address: p.address,
+          name: p.name || "",
+          description: p.description || "",
+          githubLogin: p.github_login,
+          attestationCount: 0,
+          attestations: [],
+        }))
       : PROFILES;
 
   const attestationsByRecipient = useMemo(() => {
@@ -63,46 +65,61 @@ export function ProfilesList() {
     return profiles.filter((p) => (p.name || "").toLowerCase().includes(q));
   }, [profiles, searchQuery]);
 
-  return (
-    <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <div className="flex gap-4 items-center pb-8">
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
-          <Input
-            type="text"
-            placeholder="Search profiles..."
-            className="pl-10"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
-        <CreateProfileButton />
-      </div>
-      {isLoading || attestations.isLoading ? (
-        <p className="text-sm text-gray-600">Loading profiles...</p>
-      ) : null}
-      {error || attestations.error ? (
-        <p className="text-sm text-red-600">
-          {(error as any)?.message ??
-            (attestations.error as any)?.message ??
-            "An error occurred"}
-        </p>
-      ) : null}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {filtered.map((profile) => (
-          <ProfileCard
-            key={profile.address}
-            address={profile.address}
-            name={profile.name}
-            description={profile.description}
-            githubLogin={profile.githubLogin}
-            attestationCount={profile.attestationCount}
-            attestations={profile.attestations}
-          />
-        ))}
+  if (isLoading || attestations.isLoading) {
+    return (
+      <div className="flex justify-start ">
+        <AiOutlineLoading3Quarters className="h-10 w-10 animate-spin" />
       </div>
-    </main>
+    );
+  }
+
+  if (data && data.length === 0) {
+    return (
+      <p className="text-2xl text-yellow-600 flex items-center gap-2">
+        <span>⚠️</span>
+        {"No Profile Found"}
+      </p>
+    );
+  }
+
+  return (
+    <>
+      {error ? (
+        <ErrorDisplay error={error} />
+      ) : (
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="flex gap-4 items-center pb-8">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+              <Input
+                type="text"
+                placeholder="Search profiles..."
+                className="pl-10"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+
+            <CreateProfileButton />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filtered.map((profile) => (
+              <ProfileCard
+                key={profile.address}
+                address={profile.address}
+                name={profile.name}
+                description={profile.description}
+                githubLogin={profile.githubLogin}
+                attestationCount={profile.attestationCount}
+                attestations={profile.attestations}
+              />
+            ))}
+          </div>
+        </main>
+      )}
+    </>
   );
 }
 
-export default ProfilesList;
+export default ProfilesList;