Fix loading spinner

app/globals.css

@@ -66,3 +66,20 @@ ul {
   margin-top: 0.5rem;
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+.spinner {
+  width: 48px;            /* 12 * 4px */
+  height: 48px;
+  border: 4px solid #d1d5db; /* gray-300 */
+  border-top-color: #1f2937;  /* gray-800 */
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+

app/profiles/page.tsx

@@ -220,7 +220,7 @@ export default function ProfilePage() {
           {/* Profiles Grid */}
           <div className="flex-1">
             {loading ? (
-              <div className="flex justify-center py-2">
+              <div className="flex justify-center py-8">
                 <LoadingSpinner/>
               </div>
             ) : error ? (

lib/client/LoadingSpinner.tsx

@@ -1,17 +1,8 @@
-'use client';
-
-import React from "react";
+import React from 'react'
 
 export default function LoadingSpinner() {
   return (
-    <div 
-      data-testid="spinner-container" 
-      className="flex items-center justify-center min-h-screen"
-    >
-      <div 
-        data-testid="spinner"
-        className="w-12 h-12 border-4 border-gray-300 border-t-gray-800 rounded-full animate-spin" 
-      />
-    </div>
-  );
+    <div style={{ display: 'flex', justifyContent: 'center', minHeight: '100vh', paddingTop: '2rem' }} >
+      <div className="spinner border-gray-300 border-t-gray-800" /></div>
+  )
 }

tailwind.config.ts

@@ -17,6 +17,9 @@ export default {
       },
     },
   },
+  corePlugins: {
+    animation: true,
+  },
   darkMode: 'class', // required for next-themes
   plugins: [  ],
 } satisfies Config;