Added spinner

Author: ciscoheat

src/routes/tests/delayed-validation/+page.svelte

@@ -5,13 +5,17 @@
   import { page } from '$app/stores';
   import SuperDebug from '$lib/client/SuperDebug.svelte';
   import { debounce } from 'throttle-debounce';
+  import spinner from './tadpole.svg?raw';
 
   export let data: PageData;
 
+  let checking = false;
+
   async function checkUsername(
     username: string,
     resolve: (result: string | null) => void
   ) {
+    checking = true;
     const body = new FormData();
     body.set('username', username);
 
@@ -24,6 +28,7 @@
     );
 
     resolve(response.status == 200 ? null : 'This username is taken.');
+    checking = false;
   }
 
   const throttledUsername = debounce(300, checkUsername);
@@ -42,8 +47,6 @@
 
 <h3>Delayed validation</h3>
 
-<SuperDebug data={{ $form, $errors, $tainted }} />
-
 {#if $message}
   <h4>Message: {$message}</h4>
 {/if}
@@ -65,9 +68,13 @@
     data-invalid={$errors.username}
     bind:value={$form.username}
   />
-  {#if 'username' in $errors}<span class="invalid"
-      >{$errors.username ? '❌' : '✅'}</span
-    >{/if}
+  {#if checking}
+    {@html spinner}
+  {:else if 'username' in $errors}
+    <span class="invalid">
+      {$errors.username ? '❌' : '✅'}
+    </span>
+  {/if}
 
   <div><button>Submit</button></div>
 </form>