Add a loading screen during filesystem init (#35)

src/components/auth/register/Register.svelte

@@ -24,18 +24,35 @@
 
     if (usernameValid) {
       usernameAvailable = await isUsernameAvailable(username)
-      console.log(username, ' is available: ', usernameAvailable)
     }
     checkingUsername = false
   }
 
+  let authInProcess = false
   const registerUser = async () => {
+    authInProcess = true
+
     registrationSuccess = await register(username)
   }
 </script>
 
-<input type="checkbox" id="register-modal" checked class="modal-toggle" />
-<div class="modal">
+{#if authInProcess}
+  <input type="checkbox" id="initializing" checked class="modal-toggle" />
+  <div class="modal">
+    <div
+      class="modal-box rounded-lg shadow-sm bg-slate-100 w-80 relative text-center"
+    >
+      <p class="text-slate-500">
+        <span
+          class="rounded-lg border-t-2 border-l-2 border-slate-500 w-4 h-4 inline-block animate-spin mr-1"
+        />
+        Initializing file system...
+      </p>
+    </div>
+  </div>
+{:else}
+  <input type="checkbox" id="register-modal" checked class="modal-toggle" />
+  <div class="modal">
     <div class="modal-box w-80 relative text-center">
       <a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
 
@@ -109,10 +126,13 @@
           >
             This is a shared computer
           </label>
-        <label for="registration" class="label mt-1 hidden peer-checked:block">
+          <label
+            for="registration"
+            class="label mt-1 hidden peer-checked:block"
+          >
             <span class="label-text-alt text-error text-left">
-            For security reasons, {appName} doesn't support shared computers at this
-            time.
+              For security reasons, {appName} doesn't support shared computers at
+              this time.
             </span>
           </label>
         </div>
@@ -131,4 +151,5 @@
         </div>
       </div>
     </div>
-</div>
+  </div>
+{/if}