feat: add spinner

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>
+  )
+}

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>
+  )
+}

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
 ========================= */