From 0e10b00b374df8cb965b5225fea186d37ecd7105 Mon Sep 17 00:00:00 2001
From: Dorian Zedler <dorian@itsblue.de>
Date: Thu, 5 Jan 2023 12:16:28 +0100
Subject: [PATCH] Feat: full screen loader

---
 index.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 327047c..fe279f2 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
 <body>
     <main class="container">
         <div x-data>
-            <div x-show="$store.localState.room">
+            <div x-show="$store.remoteState.connected && $store.localState.room">
                 <hgroup>
                     <h1
                         x-text="'Currently playing: ' + ($store.remoteState.isMyTurn ? 'YOU!':$store.remoteState.players[$store.remoteState.currentPlayer])">
@@ -84,6 +84,11 @@
                     </button>
                 </details>
             </div>
+
+            <div x-show="!$store.remoteState.connected && $store.localState.room">
+                <h1 class="timer loading" aria-busy="true">Connecting...</h1>
+            </div>
+
             <div x-show="!$store.localState.room">
                 <form x-data="JoinForm()" @submit.prevent="submitForm">
                     <input type="text" x-model="formData.name" placeholder="Name" />
