feat: make country selection a dropdown

fix: the loading animation reset components after a form submission, excluded loads caused by forms

Author: slashtechno

frontend/package-lock.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@hey-api/client-fetch": "^0.5.7",
+    "countries-list": "^3.1.1",
     "svelte-sonner": "^0.3.28",
     "theme-change": "^2.5.0"
   }

frontend/package.json

@@ -38,8 +38,7 @@
   </div>
 </nav>
 
-
-{#if navigating.to}
+{#if navigating.to && navigating.type != "form"}
   <div class="flex items-center justify-center min-h-screen flex-col">
     <span class="loading loading-ball loading-lg mb-2"></span>
     {returnLoadingText()}
@@ -48,7 +47,6 @@
   {@render children()}
 {/if}
 
-
 <div class="fixed bottom-4 left-4">
   <!-- Info Button -->
   <button

frontend/src/routes/+layout.svelte

@@ -8,11 +8,13 @@
   import type { HTTPValidationError } from "$lib/client/types.gen";
   import { handleError } from "$lib/misc";
   import type { UserSignupPayload } from "$lib/client/types.gen";
+  import { countries, } from 'countries-list'
   // rest is the extra props passed to the component
   let { ...rest } = $props();
 
   let isLoading = $state(false);
   let showSignupFields = $state(false);
+  $inspect(showSignupFields);
   let expandedDueTo = "";
   let userInfo: UserSignupPayload = $state({
     email: "",
@@ -27,9 +29,14 @@
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
     dob: "",
   });
-
   let redirectUrl: string;
 
+  // Convert countries to a list of objects with name and code
+  const countryList = Object.entries(countries).map(([code, data]) => ({
+    code,
+    name: data.name,
+  })).sort((a, b) => a.name.localeCompare(b.name));
+
   async function eitherLoginOrSignUp() {
     // If showSignupFields is true, the user is signing up and signupAndLogin should be called. Otherwise, the user is logging in and login should be called.
     if (!showSignupFields) {
@@ -314,20 +321,24 @@
         <label class="form-control">
           <div class="label">
             <span class="label-text">Country</span>
-            <span class="label-text-alt">
+            <!-- <span class="label-text-alt">
               <a
                 href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2"
                 class="underline">ISO 3166-1 alpha-2</a
               >
-            </span>
+            </span> -->
           </div>
-          <input
+          <select
             id="country"
-            type="text"
-            class="input input-bordered grow"
-            placeholder="US"
+            class="select select-bordered grow"
             bind:value={userInfo.country}
-          />
+          >
+            {#each countryList as { code, name } (code)}
+              <option value={code} selected={userInfo.country == code}>
+                {name}
+              </option>
+            {/each}
+          </select>
         </label>
         <label class="form-control">
           <div class="label">