Add loading overlay to root.tsx

(#134)
kitcc-org · Nov 17, 2024 · b4bc9fa · b4bc9fa
1 parent 8d8df2f
commit b4bc9fa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
@@ -1,16 +1,21 @@
+import {
+	ColorSchemeScript,
+	LoadingOverlay,
+	MantineProvider,
+} from '@mantine/core';
 import '@mantine/core/styles.css';
-import '@mantine/notifications/styles.css';
 import '@mantine/dates/styles.css';
+import { Notifications } from '@mantine/notifications';
+import '@mantine/notifications/styles.css';
 import type { LinksFunction } from '@remix-run/cloudflare';
 import {
 	Links,
 	Meta,
 	Outlet,
 	Scripts,
 	ScrollRestoration,
+	useNavigation,
 } from '@remix-run/react';
-import { ColorSchemeScript, MantineProvider } from '@mantine/core';
-import { Notifications } from '@mantine/notifications';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 export const links: LinksFunction = () => [
@@ -53,5 +58,15 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-	return <Outlet />;
+	const navigation = useNavigation();
+
+	return (
+		<>
+			<LoadingOverlay
+				visible={navigation.state !== 'idle'}
+				overlayProps={{ radius: 'sm', blur: 1 }}
+			/>
+			<Outlet />
+		</>
+	);
 }
diff --git a/frontend/app/routes/home/route.tsx b/frontend/app/routes/home/route.tsx
@@ -1,4 +1,4 @@
-import { AppShell, Container, LoadingOverlay } from '@mantine/core';
+import { AppShell, Container } from '@mantine/core';
 import {
 	ActionFunctionArgs,
 	json,
@@ -132,10 +132,6 @@ const Home = () => {
 			<HeaderComponent />
 			<Container size="xl">
 				<AppShell.Main>
-					<LoadingOverlay
-						visible={navigation.state === 'loading'}
-						overlayProps={{ radius: 'sm', blur: 1 }}
-					/>
 					<Outlet />
 				</AppShell.Main>
 			</Container>