From 7a612a6465a06b961020fcaca796c2e554ee49cc Mon Sep 17 00:00:00 2001
From: Branden J Brown <zephyrtronium@gmail.com>
Date: Wed, 31 Jan 2024 06:42:35 -0600
Subject: [PATCH] add loading indicator on queue start

---
 site/src/App.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/site/src/App.vue b/site/src/App.vue
index 5b26e31..7919996 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -1,13 +1,18 @@
 <template>
 	<v-app :theme="theme">
 		<v-app-bar :elevation="2">
-			<v-app-bar-title>Shotgun</v-app-bar-title>
+			<v-app-bar-title>SHOTGUN</v-app-bar-title>
 			<template #append>
 				<v-btn :icon="themeIcon" @click="toggleDark()"></v-btn>
 			</template>
 		</v-app-bar>
 		<v-main>
-			<TheLanding v-if="!playing" @play="playing = !playing" />
+			<TheLanding v-if="!playing && !loading" @play="clickPlay" />
+			<v-container v-else-if="loading" class="fill-height">
+				<v-row class="d-flex justify-center">
+					<v-progress-circular class="pa-8" indeterminate size="128"></v-progress-circular>
+				</v-row>
+			</v-container>
 			<Game v-else :game="testGame" :dealer="true" />
 		</v-main>
 	</v-app>
@@ -24,6 +29,14 @@ const theme = computed(() => dark.value ? 'dark' : 'light');
 const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny');
 
 const playing = ref(false);
+const loading = ref(false);
+function clickPlay() {
+	loading.value = true;
+	setTimeout(() => {
+		playing.value = true;
+		loading.value = false;
+	}, 1000);
+}
 
 const testGame = ref<Game>({
 	players: [