git.stevedylan.dev

chore: added loading screen 3ebf7f50

Steve · 2025-11-05 10:27 2 file(s) · +31 −1

src/App.tsx +19 −1

} from "@/components/ui/dialog";
import { Upload, FileUp } from "lucide-react";
import { Mnemonic } from "@evolu/common";
import { LoadingScreen } from "@/components/loading-screen";

function App() {
	const allFeeds = useQuery(allFeedsQuery);
	const hasFeeds = allFeeds.length > 0;
	const hasFeeds = allFeeds.rows?.length > 0;
	const [isInitialLoading, setIsInitialLoading] = React.useState(true);
	const [urlInput, setUrlInput] = React.useState("");
	const [isAddingFeed, setIsAddingFeed] = React.useState(false);
	const [errorMessage, setErrorMessage] = React.useState("");

	const fileInputRef = React.useRef<HTMLInputElement>(null);

	const evolu = useEvolu();

	// Handle initial loading state
	React.useEffect(() => {
		// Wait for the query to be loaded (not pending)
		if (!allFeeds.isLoading) {
			// Add a small delay to prevent flash
			const timer = setTimeout(() => {
				setIsInitialLoading(false);
			}, 300);
			return () => clearTimeout(timer);
		}
	}, [allFeeds.isLoading]);

	function handleRestoreDialogOpenChange(open: boolean) {
		setIsRestoreDialogOpen(open);

		} finally {
			setIsAddingFeed(false);
		}
	}

	if (isInitialLoading) {
		return <LoadingScreen />;
	}

	return (

src/components/loading-screen.tsx (added) +12 −0

1	+	import { Loader2 } from "lucide-react";
2	+
3	+	export function LoadingScreen() {
4	+	return (
5	+	<div className="min-h-screen w-full flex items-center justify-center">
6	+	<div className="flex flex-col items-center gap-4">
7	+	<Loader2 className="h-8 w-8 animate-spin text-primary" />
8	+	<p className="text-sm text-muted-foreground">Loading...</p>
9	+	</div>
10	+	</div>
11	+	);
12	+	}

25	25		} from "@/components/ui/dialog";
26	26		import { Upload, FileUp } from "lucide-react";
27	27		import { Mnemonic } from "@evolu/common";
	28	+	import { LoadingScreen } from "@/components/loading-screen";
28	29
29	30		function App() {
30	31		const allFeeds = useQuery(allFeedsQuery);
31		-	const hasFeeds = allFeeds.length > 0;
	32	+	const hasFeeds = allFeeds.rows?.length > 0;
	33	+	const [isInitialLoading, setIsInitialLoading] = React.useState(true);
32	34		const [urlInput, setUrlInput] = React.useState("");
33	35		const [isAddingFeed, setIsAddingFeed] = React.useState(false);
34	36		const [errorMessage, setErrorMessage] = React.useState("");

38	40		const fileInputRef = React.useRef<HTMLInputElement>(null);
39	41
40	42		const evolu = useEvolu();
	43	+
	44	+	// Handle initial loading state
	45	+	React.useEffect(() => {
	46	+	// Wait for the query to be loaded (not pending)
	47	+	if (!allFeeds.isLoading) {
	48	+	// Add a small delay to prevent flash
	49	+	const timer = setTimeout(() => {
	50	+	setIsInitialLoading(false);
	51	+	}, 300);
	52	+	return () => clearTimeout(timer);
	53	+	}
	54	+	}, [allFeeds.isLoading]);
41	55
42	56		function handleRestoreDialogOpenChange(open: boolean) {
43	57		setIsRestoreDialogOpen(open);

210	224		} finally {
211	225		setIsAddingFeed(false);
212	226		}
	227	+	}
	228	+
	229	+	if (isInitialLoading) {
	230	+	return <LoadingScreen />;
213	231		}
214	232
215	233		return (