Add improved full screen loader

apps/web/src/pages/_app.tsx

@@ -5,6 +5,7 @@ import React, {useEffect} from 'react';
 import {Toaster} from 'sonner';
 import {SWRConfig} from 'swr';
 import {DefaultSeo} from 'next-seo';
+import {Loader} from '@plunk/ui';
 import {ActiveProjectProvider} from '../lib/contexts/ActiveProjectProvider';
 import {useProjects} from '../lib/hooks/useProject';
 import {useUser} from '../lib/hooks/useUser';
@@ -43,26 +44,7 @@ function AuthGuard({children}: {children: React.ReactNode}) {
 
   // Show loading state while checking authentication (only for protected routes)
   if (isLoading && !isPublicRoute) {
-    return (
-      <div className="h-screen flex items-center justify-center">
-        <div className="text-center">
-          <svg
-            className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-          <p className="mt-2 text-sm text-neutral-500">Loading...</p>
-        </div>
-      </div>
-    );
+    return <Loader message="Authenticating..." />;
   }
 
   // Don't render protected content if redirecting
@@ -87,26 +69,7 @@ function ProjectGuard({children}: {children: React.ReactNode}) {
 
   // Show loading state while checking projects (only for routes that need a project)
   if (isLoading && !isNoProjectRoute) {
-    return (
-      <div className="h-screen flex items-center justify-center">
-        <div className="text-center">
-          <svg
-            className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-          <p className="mt-2 text-sm text-neutral-500">Loading...</p>
-        </div>
-      </div>
-    );
+    return <Loader message="Loading project..." />;
   }
 
   // Don't render protected content if redirecting

packages/ui/src/components/atoms/IconSpinner.tsx

@@ -0,0 +1,74 @@
+import {cn} from '../../lib';
+
+export interface IconSpinnerProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}
+
+const sizeConfig = {
+  sm: {
+    container: 'w-4 h-4',
+    border: 'border-2',
+    innerInset: 'inset-0.5',
+    dot: 'w-1 h-1',
+  },
+  md: {
+    container: 'w-8 h-8',
+    border: 'border-[2.5px]',
+    innerInset: 'inset-1',
+    dot: 'w-1.5 h-1.5',
+  },
+  lg: {
+    container: 'w-12 h-12',
+    border: 'border-[3px]',
+    innerInset: 'inset-1.5',
+    dot: 'w-2 h-2',
+  },
+  xl: {
+    container: 'w-16 h-16',
+    border: 'border-[3px]',
+    innerInset: 'inset-2',
+    dot: 'w-2.5 h-2.5',
+  },
+};
+
+/**
+ * Animated spinner icon component with dual rotating rings
+ */
+export function IconSpinner({size = 'md', className}: IconSpinnerProps) {
+  const config = sizeConfig[size];
+
+  return (
+    <div className={cn('relative inline-block', config.container, className)}>
+      {/* Outer glow effect */}
+      <div className="absolute inset-0 rounded-full bg-neutral-900/10 blur-sm animate-pulse" />
+
+      {/* Base circle */}
+      <div className={cn('absolute inset-0 rounded-full border-neutral-100', config.border)} />
+
+      {/* Primary animated ring */}
+      <div
+        className={cn(
+          'absolute inset-0 rounded-full border-transparent border-t-neutral-900 border-r-neutral-700 animate-spin',
+          config.border,
+        )}
+        style={{animationDuration: '0.8s'}}
+      />
+
+      {/* Secondary animated ring (counter-rotating) */}
+      <div
+        className={cn(
+          'absolute rounded-full border-transparent border-b-neutral-800 border-l-neutral-600 animate-spin',
+          config.border,
+          config.innerInset,
+        )}
+        style={{animationDuration: '1.2s', animationDirection: 'reverse'}}
+      />
+
+      {/* Center dot */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className={cn('bg-neutral-900 rounded-full animate-pulse', config.dot)} />
+      </div>
+    </div>
+  );
+}

packages/ui/src/components/atoms/Loader.tsx

@@ -0,0 +1,54 @@
+import Image from 'next/image';
+
+export interface LoaderProps {
+  message?: string;
+  showLogo?: boolean;
+}
+
+/**
+ * Full-screen loader component with animated logo and spinner
+ */
+export function Loader({message = 'Loading...', showLogo = true}: LoaderProps) {
+  return (
+    <div className="h-screen flex items-center justify-center bg-white">
+      <div className="text-center animate-in fade-in duration-500">
+        {showLogo && (
+          <div className="mb-8 animate-in zoom-in-95 duration-700">
+            <div className="relative w-20 h-20 mx-auto p-4 bg-white rounded-2xl shadow-sm border border-neutral-200/50">
+              <Image src="/assets/logo.png" alt="Plunk" width={48} height={48} className="rounded-lg" priority />
+            </div>
+          </div>
+        )}
+
+        {/* Animated spinner */}
+        <div className="relative w-16 h-16 mx-auto mb-6">
+          {/* Outer glow effect */}
+          <div className="absolute inset-0 rounded-full bg-neutral-900/10 blur-xl animate-pulse" />
+
+          {/* Base circle */}
+          <div className="absolute inset-0 rounded-full border-[3px] border-neutral-100" />
+
+          {/* Primary animated ring */}
+          <div
+            className="absolute inset-0 rounded-full border-[3px] border-transparent border-t-neutral-900 border-r-neutral-700 animate-spin"
+            style={{animationDuration: '0.8s'}}
+          />
+
+          {/* Secondary animated ring (counter-rotating) */}
+          <div
+            className="absolute inset-2 rounded-full border-[3px] border-transparent border-b-neutral-800 border-l-neutral-600 animate-spin"
+            style={{animationDuration: '1.2s', animationDirection: 'reverse'}}
+          />
+
+          {/* Center dot */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-2.5 h-2.5 bg-neutral-900 rounded-full animate-pulse shadow-lg" />
+          </div>
+        </div>
+
+        {/* Loading message */}
+        {message && <p className="text-sm font-medium text-neutral-700 animate-in fade-in duration-1000">{message}</p>}
+      </div>
+    </div>
+  );
+}

packages/ui/src/components/atoms/index.ts

@@ -9,8 +9,10 @@ export * from './Command';
 export * from './Dialog';
 export * from './DropdownMenu';
 export * from './Form';
+export * from './IconSpinner';
 export * from './Input';
 export * from './Label';
+export * from './Loader';
 export * from './Popover';
 export * from './Progress';
 export * from './RadioGroup';