From 8d8df2fd3e826b29a787987468493d863f51b8ec Mon Sep 17 00:00:00 2001
From: shunsei <k.shunsei1227@gmail.com>
Date: Sun, 17 Nov 2024 12:07:55 +0900
Subject: [PATCH 1/2] Add loading overlay to home route  (#134)

---
 frontend/app/routes/home/route.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/app/routes/home/route.tsx b/frontend/app/routes/home/route.tsx
index 461210f6..2d19c092 100644
--- a/frontend/app/routes/home/route.tsx
+++ b/frontend/app/routes/home/route.tsx
@@ -1,4 +1,4 @@
-import { AppShell, Container } from '@mantine/core';
+import { AppShell, Container, LoadingOverlay } from '@mantine/core';
 import {
 	ActionFunctionArgs,
 	json,
@@ -132,6 +132,10 @@ const Home = () => {
 			<HeaderComponent />
 			<Container size="xl">
 				<AppShell.Main>
+					<LoadingOverlay
+						visible={navigation.state === 'loading'}
+						overlayProps={{ radius: 'sm', blur: 1 }}
+					/>
 					<Outlet />
 				</AppShell.Main>
 			</Container>

From b4bc9fafaadc56205d1e23d8ca36acfc9d520878 Mon Sep 17 00:00:00 2001
From: shunsei <k.shunsei1227@gmail.com>
Date: Mon, 18 Nov 2024 04:14:53 +0900
Subject: [PATCH 2/2] Add loading overlay to root.tsx  (#134)

---
 frontend/app/root.tsx              | 23 +++++++++++++++++++----
 frontend/app/routes/home/route.tsx |  6 +-----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
index 01743657..9c38b46f 100644
--- a/frontend/app/root.tsx
+++ b/frontend/app/root.tsx
@@ -1,6 +1,12 @@
+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,
@@ -8,9 +14,8 @@ import {
 	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
index 2d19c092..461210f6 100644
--- 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>