diff options
Diffstat (limited to 'frontend/src/app/loading.tsx')
| -rw-r--r-- | frontend/src/app/loading.tsx | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/frontend/src/app/loading.tsx b/frontend/src/app/loading.tsx new file mode 100644 index 0000000..56455c3 --- /dev/null +++ b/frontend/src/app/loading.tsx @@ -0,0 +1,54 @@ +import Image from "next/image"; + +export default function Loading() { + return ( + <div className="fixed inset-0 z-[9999] bg-background flex items-center justify-center"> + {/* Background pattern */} + <div className="absolute inset-0 bg-gradient-to-br from-background via-background to-muted/20" /> + + {/* Loading content */} + <div className="relative z-10 flex flex-col items-center space-y-4"> + {/* Logo with animation */} + <div className="relative"> + <div className="animate-pulse"> + <Image + src="/black-logo.png" + alt="blcklst" + width={160} + height={50} + className="h-12 w-auto block dark:hidden" + priority + /> + <Image + src="/white-logo.png" + alt="blcklst" + width={160} + height={50} + className="h-12 w-auto hidden dark:block" + priority + /> + </div> + </div> + + {/* Loading text - closer to logo */} + <div className="text-center space-y-3 -mt-2"> + <p className="text-sm text-muted-foreground animate-pulse"> + not everyone gets blcklsted + </p> + + {/* Loading dots */} + <div className="flex items-center justify-center space-x-1"> + <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce [animation-delay:-0.3s]"></div> + <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce [animation-delay:-0.15s]"></div> + <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce"></div> + </div> + </div> + + {/* Progress bar */} + <div className="w-64 h-1 bg-muted rounded-full overflow-hidden"> + <div className="h-full bg-foreground rounded-full animate-[loading_1s_ease-in-out_infinite]"></div> + </div> + </div> + </div> + ); +}
\ No newline at end of file |