From c06f86edbba4d0601d656c14d3cbe6b6d242ed8f Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Mon, 4 Aug 2025 11:34:01 +0200
Subject: [PATCH] Fix loading spinner

---
 app/globals.css               | 17 +++++++++++++++++
 app/profiles/page.tsx         |  2 +-
 lib/client/LoadingSpinner.tsx | 17 ++++-------------
 tailwind.config.ts            |  3 +++
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index db0229fc..a208cb21 100644
--- a/app/globals.css
+++ b/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;
+}
+
+
diff --git a/app/profiles/page.tsx b/app/profiles/page.tsx
index 551381b0..d22fa30c 100644
--- a/app/profiles/page.tsx
+++ b/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 ? (
diff --git a/lib/client/LoadingSpinner.tsx b/lib/client/LoadingSpinner.tsx
index 0d665822..2f8da1f0 100644
--- a/lib/client/LoadingSpinner.tsx
+++ b/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>
+  )
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 77fe4d90..7b4293ae 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,6 +17,9 @@ export default {
       },
     },
   },
+  corePlugins: {
+    animation: true,
+  },
   darkMode: 'class', // required for next-themes
   plugins: [  ],
 } satisfies Config;