feat: cool new loading

Author: Hyteq

apps/dashboard/components/auth/auth-loading.tsx

@@ -1,17 +1,44 @@
-"use client";
-
-import { Loader2 } from "lucide-react";
+import { SpinnerIcon } from "@phosphor-icons/react";
 import { cn } from "@/lib/utils";
 
 export interface AuthLoadingProps {
   className?: string;
 }
+
 export function AuthLoading({ className }: AuthLoadingProps) {
   return (
-    <div className={cn("flex min-h-screen items-center justify-center bg-background", className)}>
-      <div className="flex flex-col items-center gap-4">
-        <Loader2 className="h-10 w-10 animate-[spin_0.5s_linear_infinite] text-primary" />
-        <p className="text-sm text-muted-foreground">Loading...</p>
+    <div className={cn("flex min-h-screen items-center justify-center bg-gradient-to-br from-background via-background to-muted/20", className)}>
+      <div className="relative flex flex-col items-center gap-6">
+        {/* Outer glow ring */}
+        <div className="absolute inset-0 rounded-full bg-gradient-to-r from-primary/20 via-primary/10 to-primary/20 blur-xl animate-pulse" />
+
+        {/* Main spinner container */}
+        <div className="relative flex items-center justify-center">
+          {/* Background circle */}
+          <div className="absolute h-20 w-20 rounded-full bg-gradient-to-r from-primary/10 to-primary/5 animate-ping" />
+
+          {/* Spinner */}
+          <SpinnerIcon
+            className="h-12 w-12 animate-spin text-primary drop-shadow-lg"
+          />
+        </div>
+
+        {/* Loading text with gradient */}
+        <div className="flex flex-col items-center gap-2">
+          <h2 className="bg-gradient-to-r from-primary via-primary/80 to-primary bg-clip-text text-xl font-semibold text-transparent">
+            Loading your experience
+          </h2>
+          <div className="flex items-center gap-1">
+            <div className="h-1 w-1 rounded-full bg-primary/60 animate-bounce [animation-delay:-0.3s]" />
+            <div className="h-1 w-1 rounded-full bg-primary/60 animate-bounce [animation-delay:-0.15s]" />
+            <div className="h-1 w-1 rounded-full bg-primary/60 animate-bounce" />
+          </div>
+        </div>
+
+        {/* Subtle progress bar */}
+        <div className="w-48 h-1 bg-muted rounded-full overflow-hidden">
+          <div className="h-full bg-gradient-to-r from-primary/50 to-primary rounded-full animate-pulse" />
+        </div>
       </div>
     </div>
   );

apps/dashboard/package.json

@@ -11,20 +11,24 @@
   },
   "dependencies": {
     "@databuddy/sdk": "workspace:*",
+    "@nivo/sankey": "^0.99.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-query": "^5.75.4",
     "@types/d3-scale": "^4.0.9",
+    "@types/dagre": "^0.7.52",
     "@types/geojson": "^7946.0.16",
     "@types/leaflet": "^1.9.17",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@uidotdev/usehooks": "^2.4.1",
+    "@xyflow/react": "^12.7.0",
     "better-auth": "^1.2.7",
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "d3-geo": "^3.1.1",
     "d3-scale": "^4.0.2",
+    "dagre": "^0.8.5",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.9.2",