fix: dashboard sections invisible — move animation delay to inline style

Author: prithaxdev

apps/web/app/(app)/dashboard/page.tsx

@@ -31,7 +31,10 @@ export default function DashboardPage() {
     <div className="mx-auto max-w-6xl space-y-10 p-6 lg:p-8">
 
       {/* ── Header ───────────────────────────────────────────── */}
-      <div className="opacity-0 animate-[fadeSlideUp_0.35s_ease-out_forwards]">
+      <div
+        className="opacity-0 animate-[fadeSlideUp_0.35s_ease-out_forwards]"
+        style={{ animationDelay: "0ms" }}
+      >
         <h1 className="font-heading text-2xl font-semibold tracking-tight">
           {greeting()}, {name}
         </h1>
@@ -42,7 +45,10 @@ export default function DashboardPage() {
       <StatsCards />
 
       {/* ── Topic clusters ───────────────────────────────────── */}
-      <section className="opacity-0 animate-[fadeSlideUp_0.35s_ease-out_0.28s_forwards]">
+      <section
+        className="opacity-0 animate-[fadeSlideUp_0.35s_ease-out_forwards]"
+        style={{ animationDelay: "280ms" }}
+      >
         <div className="mb-4 flex items-center gap-2">
           <h2 className="font-heading text-base font-semibold tracking-tight">Topic Clusters</h2>
           <span className="rounded-full bg-muted px-2 py-0.5 font-mono text-[10px] text-muted-foreground">
@@ -57,7 +63,10 @@ export default function DashboardPage() {
       </section>
 
       {/* ── Review activity heatmap ──────────────────────────── */}
-      <section className="opacity-0 animate-[fadeSlideUp_0.35s_ease-out_0.38s_forwards]">
+      <section
+        className="opacity-0 animate-[fadeSlideUp_0.35s_ease-out_forwards]"
+        style={{ animationDelay: "380ms" }}
+      >
         <div className="mb-4 flex items-center justify-between">
           <h2 className="font-heading text-base font-semibold tracking-tight">Review Activity</h2>
           <span className="font-mono text-[10px] text-muted-foreground">last {15} weeks</span>
@@ -69,7 +78,10 @@ export default function DashboardPage() {
 
       {/* ── Empty state CTA (no snippets yet) ───────────────── */}
       {snippets.length === 0 && (
-        <div className="rounded-2xl border border-dashed border-border/60 bg-card/40 px-8 py-12 text-center opacity-0 animate-[fadeSlideUp_0.35s_ease-out_0.48s_forwards]">
+        <div
+          className="rounded-2xl border border-dashed border-border/60 bg-card/40 px-8 py-12 text-center opacity-0 animate-[fadeSlideUp_0.35s_ease-out_forwards]"
+          style={{ animationDelay: "480ms" }}
+        >
           <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} aria-hidden className="size-6 text-primary">
               <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />