feat: spin avatar circle when loading

src/app/globals.css

@@ -113,6 +113,13 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
+
+  .absolute-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 
 @layer base {

src/app/page.tsx

@@ -2,26 +2,25 @@ import { Suspense } from "react";
 
 import Count from "@/src/components/Count";
 import CounterText from "@/src/components/CounterText";
+import AvatarSection from "@/src/components/AvatarSection";
 import Preferences from "@/src/components/Preferences";
-import UserImage from "@/src/components/UserImage";
 
 export default function Home() {
   return (
     <main className="flex flex-col flex-1 items-center text-center">
       <p className="text-6xl font-bold uppercase leading-snug">You have</p>
       <div className="mt-2 mb-6">
-        <div className="relative">
-          <UserImage />
-          <div className="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center">
-            <Suspense
-              fallback={
-                <CounterText className="text-[2.5rem]">Loading...</CounterText>
-              }
-            >
-              <Count />
-            </Suspense>
-          </div>
-        </div>
+      <Suspense
+          fallback={
+            <AvatarSection isLoading>
+            <CounterText className="text-[2.5rem]">Loading...</CounterText>
+            </AvatarSection>
+          }
+        >
+        <AvatarSection>
+          <Count />
+          </AvatarSection>
+        </Suspense>
       </div>
       <p className="text-2xl font-semibold uppercase leading-normal">
         days on the snow

src/components/AvatarSection.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import UserImage from "@/src/components/UserImage";
+import { cn } from "../lib/utils";
+
+export default function AvatarSection({ children, isLoading = false }: { children: React.ReactNode, isLoading?: boolean }) {
+  return (
+    <div className="relative">
+      <UserImage className={cn(isLoading && "animate-spin")} />
+      <div className="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center">
+       {children}
+      </div>
+    </div>
+  );
+}

src/components/UserImage.tsx

@@ -3,17 +3,18 @@
 import Image from "next/image";
 
 import { useSession } from "@/src/lib/auth/auth-client";
+import { cn } from "@/src/lib/utils";
 
-export default function UserImage() {
+export default function UserImage({ className }: { className?: string }) {
   const { data: session } = useSession();
 
   return (
-    <div className="relative rounded-full border-onyx border-4">
+    <div className={cn("relative rounded-full border-onyx border-4", className)}>
       <div className="w-[200px] h-[200px] rounded-full p-8 bg-gradient-to-br from-green from-40% to-blue to-60% border-white border-2" />
-      <div className="bg-pink absolute top-[25px] left-[25px] rounded-full overflow-hidden border-white border-2">
+      <div className="bg-pink absolute-center rounded-full overflow-hidden border-white border-2">
         {session?.user?.image ? (
           <Image
-            className="rounded-full mix-blend-color-dodge grayscale contrast-200"
+            className="rounded-full mix-blend-color-dodge grayscale contrast-200 max-w-none"
             width={150}
             height={150}
             src={session?.user?.image ?? ""}