From 7c1968415951d4e6914770417624fc84d44732a9 Mon Sep 17 00:00:00 2001
From: myrmidex
Date: Fri, 1 Aug 2025 01:12:21 +0200
Subject: [PATCH] Make proper spinner
---
.../js/components/ui/TerminalSpinner.tsx | 57 +++++++++++++++++++
resources/js/pages/dashboard.tsx | 7 +--
2 files changed, 59 insertions(+), 5 deletions(-)
create mode 100644 resources/js/components/ui/TerminalSpinner.tsx
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 (
<>
-
+
);
}