From 172b6d3211d040e8d577afda80debce583c3bf7c Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 15 Mar 2025 23:07:40 +0900
Subject: feat(frontend): show loaing screen

---
 frontend/app/components/GolfPlayApp.tsx                       | 7 ++++---
 frontend/app/components/GolfPlayApps/GolfPlayAppLoading.tsx   | 9 +++++++++
 frontend/app/components/GolfWatchApp.tsx                      | 7 ++++---
 frontend/app/components/GolfWatchApps/GolfWatchAppLoading.tsx | 9 +++++++++
 4 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 frontend/app/components/GolfPlayApps/GolfPlayAppLoading.tsx
 create mode 100644 frontend/app/components/GolfWatchApps/GolfWatchAppLoading.tsx

(limited to 'frontend/app/components')

diff --git a/frontend/app/components/GolfPlayApp.tsx b/frontend/app/components/GolfPlayApp.tsx
index e8fafbd..0bb66eb 100644
--- a/frontend/app/components/GolfPlayApp.tsx
+++ b/frontend/app/components/GolfPlayApp.tsx
@@ -20,6 +20,7 @@ import {
 } from "../states/play";
 import GolfPlayAppFinished from "./GolfPlayApps/GolfPlayAppFinished";
 import GolfPlayAppGaming from "./GolfPlayApps/GolfPlayAppGaming";
+import GolfPlayAppLoading from "./GolfPlayApps/GolfPlayAppLoading";
 import GolfPlayAppStarting from "./GolfPlayApps/GolfPlayAppStarting";
 import GolfPlayAppWaiting from "./GolfPlayApps/GolfPlayAppWaiting";
 
@@ -111,7 +112,9 @@ export default function GolfPlayApp({ game, player, initialCode }: Props) {
 		setLatestGameState,
 	]);
 
-	if (gameStateKind === "waiting") {
+	if (gameStateKind === "loading") {
+		return <GolfPlayAppLoading />;
+	} else if (gameStateKind === "waiting") {
 		return (
 			<GolfPlayAppWaiting
 				gameDisplayName={game.display_name}
@@ -135,7 +138,5 @@ export default function GolfPlayApp({ game, player, initialCode }: Props) {
 		);
 	} else if (gameStateKind === "finished") {
 		return <GolfPlayAppFinished />;
-	} else {
-		return null;
 	}
 }
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppLoading.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppLoading.tsx
new file mode 100644
index 0000000..7b424f2
--- /dev/null
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppLoading.tsx
@@ -0,0 +1,9 @@
+export default function GolfPlayAppLoading() {
+	return (
+		<div className="min-h-screen bg-gray-100 flex items-center justify-center">
+			<div className="text-center">
+				<div className="text-6xl font-bold text-black">読込中</div>
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/app/components/GolfWatchApp.tsx b/frontend/app/components/GolfWatchApp.tsx
index 919fa4f..5cbec3d 100644
--- a/frontend/app/components/GolfWatchApp.tsx
+++ b/frontend/app/components/GolfWatchApp.tsx
@@ -17,6 +17,7 @@ import {
 } from "../states/watch";
 import GolfWatchAppGaming1v1 from "./GolfWatchApps/GolfWatchAppGaming1v1";
 import GolfWatchAppGamingMultiplayer from "./GolfWatchApps/GolfWatchAppGamingMultiplayer";
+import GolfWatchAppLoading from "./GolfWatchApps/GolfWatchAppLoading";
 import GolfWatchAppStarting from "./GolfWatchApps/GolfWatchAppStarting";
 import GolfWatchAppWaiting1v1 from "./GolfWatchApps/GolfWatchAppWaiting1v1";
 import GolfWatchAppWaitingMultiplayer from "./GolfWatchApps/GolfWatchAppWaitingMultiplayer";
@@ -106,7 +107,9 @@ export default function GolfWatchApp({ game }: Props) {
 		setRanking,
 	]);
 
-	if (gameStateKind === "waiting") {
+	if (gameStateKind === "loading") {
+		return <GolfWatchAppLoading />;
+	} else if (gameStateKind === "waiting") {
 		return game.game_type === "1v1" ? (
 			<GolfWatchAppWaiting1v1
 				gameDisplayName={game.display_name}
@@ -139,7 +142,5 @@ export default function GolfWatchApp({ game }: Props) {
 				gameResult={null /* TODO */}
 			/>
 		);
-	} else {
-		return null;
 	}
 }
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppLoading.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppLoading.tsx
new file mode 100644
index 0000000..7169d24
--- /dev/null
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppLoading.tsx
@@ -0,0 +1,9 @@
+export default function GolfWatchAppLoading() {
+	return (
+		<div className="min-h-screen bg-gray-100 flex items-center justify-center">
+			<div className="text-center">
+				<div className="text-6xl font-bold text-black">読込中</div>
+			</div>
+		</div>
+	);
+}
-- 
cgit v1.2.3-70-g09d2