lvl0/incr
lvl0/incr
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 3 Packages Wiki Activity Actions

Make proper spinner

Browse source
This commit is contained in:
myrmidex 2025-08-01 01:12:21 +02:00
parent 5e7032c270
commit 7c19684159
2 changed files with 59 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
resources/js/components/ui/TerminalSpinner.tsx Normal file
View file

@ -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 = (
<div className="border border-red-500/30 bg-black p-6">
<span className={`text-red-500 font-mono ${sizeClasses[size]} uppercase tracking-wider`}>
[SYSTEM] {text}<span className="inline-block w-8">{getDots()}</span>
</span>
</div>
);
if (fullScreen) {
return (
<div className="min-h-screen bg-black flex items-center justify-center">
{spinner}
</div>
);
}
return spinner;
}

7
resources/js/pages/dashboard.tsx
View file

@ -3,6 +3,7 @@ import InlineForm from '@/components/Display/InlineForm';
import ProgressBar from '@/components/Display/ProgressBar'; import ProgressBar from '@/components/Display/ProgressBar';
import StatsBox from '@/components/Display/StatsBox'; import StatsBox from '@/components/Display/StatsBox';
import OnboardingFlow from '@/components/Onboarding/OnboardingFlow'; import OnboardingFlow from '@/components/Onboarding/OnboardingFlow';
import TerminalSpinner from '@/components/ui/TerminalSpinner';
import { Head } from '@inertiajs/react'; import { Head } from '@inertiajs/react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -186,11 +187,7 @@ export default function Dashboard() {
return ( return (
<> <>
<Head title="Dashboard" /> <Head title="Dashboard" />
<div className="min-h-screen bg-black flex items-center justify-center"> <TerminalSpinner fullScreen />
<div className="text-red-500 font-mono text-lg animate-pulse">
LOADING...
</div>
</div>
</> </>
); );
} }