feat(frontend): show loaing screen

4 files changed, 26 insertions, 6 deletions

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>
+	);
+}