Add improved full screen loader

2025-12-04 09:27:14 +01:00
parent e4a43dfb57
commit 40e35735dc
4 changed files with 133 additions and 40 deletions
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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';