From 92305c1a1277ec004e13e79c5b1a6e693efb7345 Mon Sep 17 00:00:00 2001
From: LucasDLTG <lucas.deletang.legravier@gmail.com>
Date: Fri, 24 Apr 2026 17:04:28 +0200
Subject: [PATCH] feat: add spinner

---
 src/app/[locale]/doc/page.tsx | 37 ++++++++++++++++++++++++++++++++++-
 src/components/spinner.tsx    | 21 ++++++++++++++++++++
 src/globals.css               | 12 ++++++++++++
 3 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/components/spinner.tsx

diff --git a/src/app/[locale]/doc/page.tsx b/src/app/[locale]/doc/page.tsx
index e4a8b2a..b852adb 100644
--- a/src/app/[locale]/doc/page.tsx
+++ b/src/app/[locale]/doc/page.tsx
@@ -21,7 +21,6 @@
 
 //   return (
 //     <div className="p-6">
-//       <h1>About</h1>
 
 //       {loading && <p>Loading...</p>}
 
@@ -31,3 +30,39 @@
 //     </div>
 //   )
 // }
+
+'use client'
+
+import { useEffect, useState } from 'react'
+import Spinner from '@/components/spinner'
+
+export default function AboutPage() {
+  const [data, setData] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch((process.env.NEXT_PUBLIC_API_URL as string) + '/docs.json')
+      .then((res) => res.json())
+      .then((result) => {
+        setData(result)
+        setLoading(false)
+      })
+      .catch(() => {
+        setLoading(false)
+      })
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="h-12 w-12 rounded-full border-4 border-gray-300 border-t-blue-600 animate-spin" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-primary text-primary transition-theme">
+        <Spinner/>
+      </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/spinner.tsx b/src/components/spinner.tsx
new file mode 100644
index 0000000..6e9ebe1
--- /dev/null
+++ b/src/components/spinner.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+type SpinnerProps = {
+  text?: string
+}
+
+export default function Spinner({ text = '' }: SpinnerProps) {
+  return (
+    <div className="relative flex items-center justify-center min-h-screen bg-primary text-primary transition-theme">
+      <div className="absolute text-muted text-sm tracking-widest">
+        {text}
+      </div>
+
+      {/* Spinner */}
+      <div className="relative h-14 w-14">
+        <div className="absolute inset-0 rounded-full border-4 border-muted transition-theme" />
+        <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-[var(--accent)] animate-spin transition-theme" />
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/globals.css b/src/globals.css
index b41cc69..cc5de83 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -23,6 +23,8 @@ body {
 
   --accent: #00d4ff;
 
+  --muted-color: #ffffff33;
+
   --color-base: #000000;
   --color-inverse: #ffffff;
 
@@ -42,6 +44,8 @@ body {
 
   --accent: #0077ff;
 
+  --muted-color: #11111133;
+
   --color-base: #ffffff;
   --color-inverse: #000000;
 }
@@ -62,6 +66,14 @@ body {
   color: var(--accent);
 }
 
+.text-color {
+  color: var(--muted-color);
+}
+
+.border-muted {
+  border-color: var(--muted-color);
+}
+
 /* =========================
    TRANSITIONS
 ========================= */