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 */}
{loading ? ( -
+
) : 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 ( -
-
-
- ); +
+
+ ) } 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;