From b0acb23edfa7f9f342073865fe09271331289fd2 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 26 Apr 2024 23:19:50 +0000
Subject: [PATCH] Add loading state to setup page

---
 src/routes/setup/+page.svelte | 74 ++++++++++++++++++++---------------
 1 file changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte
index b0d5be5..ec815da 100644
--- a/src/routes/setup/+page.svelte
+++ b/src/routes/setup/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
+
+  let loading = false;
 </script>
 
 <h1 class="text-center font-bold text-4xl">AdventureLog Setup</h1>
@@ -9,39 +11,47 @@
   Welcome to AdventureLog! Please follow the steps below to setup your server.
 </p>
 
-<!-- step 1 create admin user -->
-<h2 class="text-center font-bold text-2xl mt-6">Create Admin User</h2>
+{#if !loading}
+  <!-- step 1 create admin user -->
+  <h2 class="text-center font-bold text-2xl mt-6">Create Admin User</h2>
 
-<div class="flex justify-center">
-  <form method="post" use:enhance class="w-full max-w-xs">
-    <label for="username">Username</label>
-    <input
-      name="username"
-      id="username"
-      class="block mb-2 input input-bordered w-full max-w-xs"
-    /><br />
-    <label for="first_name">First Name</label>
-    <input
-      name="first_name"
-      id="first_name"
-      class="block mb-2 input input-bordered w-full max-w-xs"
-    /><br />
-    <label for="last_name">Last Name</label>
-    <input
-      name="last_name"
-      id="last_name"
-      class="block mb-2 input input-bordered w-full max-w-xs"
-    /><br />
-    <label for="password">Password</label>
-    <input
-      type="password"
-      name="password"
-      id="password"
-      class="block mb-2 input input-bordered w-full max-w-xs"
-    /><br />
-    <button class="py-2 px-4 btn btn-primary">Signup and Setup Server</button>
-  </form>
-</div>
+  <div class="flex justify-center">
+    <form method="post" use:enhance class="w-full max-w-xs">
+      <label for="username">Username</label>
+      <input
+        name="username"
+        id="username"
+        class="block mb-2 input input-bordered w-full max-w-xs"
+      /><br />
+      <label for="first_name">First Name</label>
+      <input
+        name="first_name"
+        id="first_name"
+        class="block mb-2 input input-bordered w-full max-w-xs"
+      /><br />
+      <label for="last_name">Last Name</label>
+      <input
+        name="last_name"
+        id="last_name"
+        class="block mb-2 input input-bordered w-full max-w-xs"
+      /><br />
+      <label for="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+        class="block mb-2 input input-bordered w-full max-w-xs"
+      /><br />
+      <button class="py-2 px-4 btn btn-primary">Signup and Setup Server</button>
+    </form>
+  </div>
+{/if}
+
+{#if loading}
+  <div class="flex justify-center items-center w-full mt-16">
+    <span class="loading loading-spinner w-24 h-24"></span>
+  </div>
+{/if}
 
 <svelte:head>
   <title>Setup | AdventureLog</title>