diff --git a/resources/js/components/ui/TerminalSpinner.tsx b/resources/js/components/ui/TerminalSpinner.tsx new file mode 100644 index 0000000..98c5169 --- /dev/null +++ b/resources/js/components/ui/TerminalSpinner.tsx @@ -0,0 +1,57 @@ +import { useEffect, useState } from 'react'; + +interface TerminalSpinnerProps { + text?: string; + size?: 'sm' | 'md' | 'lg'; + fullScreen?: boolean; +} + +export default function TerminalSpinner({ + text = 'LOADING', + size = 'md', + fullScreen = false +}: TerminalSpinnerProps) { + const [dots, setDots] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setDots(prev => (prev + 1) % 4); + }, 500); + + return () => clearInterval(interval); + }, []); + + const getDots = () => { + switch (dots) { + case 0: return ' '; + case 1: return '. '; + case 2: return '.. '; + case 3: return '...'; + default: return ' '; + } + }; + + const sizeClasses = { + sm: 'text-sm', + md: 'text-lg', + lg: 'text-xl' + }; + + const spinner = ( +
+ + [SYSTEM] {text}{getDots()} + +
+ ); + + if (fullScreen) { + return ( +
+ {spinner} +
+ ); + } + + return spinner; +} \ No newline at end of file diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx index deb9369..3abea13 100644 --- a/resources/js/pages/dashboard.tsx +++ b/resources/js/pages/dashboard.tsx @@ -3,6 +3,7 @@ import InlineForm from '@/components/Display/InlineForm'; import ProgressBar from '@/components/Display/ProgressBar'; import StatsBox from '@/components/Display/StatsBox'; import OnboardingFlow from '@/components/Onboarding/OnboardingFlow'; +import TerminalSpinner from '@/components/ui/TerminalSpinner'; import { Head } from '@inertiajs/react'; import { useEffect, useState } from 'react'; @@ -186,11 +187,7 @@ export default function Dashboard() { return ( <> -
-
- LOADING... -
-
+ ); }