web/Omnibox: show a spinner when loading

replaces the link icon with a spinner when loading the turnstile checks or processing the link

web/src/components/misc/Turnstile.svelte

@@ -2,6 +2,8 @@
     import env from "$lib/env";
     import { onMount } from "svelte";
 
+    import { turnstileLoaded } from "$lib/state/turnstile";
+
     let turnstileElement: HTMLElement;
     let turnstileScript: HTMLElement;
 
@@ -15,6 +17,9 @@
                     console.log("turnstile error code:", error);
                     return true;
                 },
+                callback: () => {
+                    $turnstileLoaded = true;
+                }
             });
         });
     });

web/src/components/save/Omnibox.svelte

@@ -3,17 +3,20 @@
     import { goto } from "$app/navigation";
     import { SvelteComponent, tick } from "svelte";
 
+    import env from "$lib/env";
     import { t } from "$lib/i18n/translations";
 
     import dialogs from "$lib/dialogs";
 
     import { link } from "$lib/state/omnibox";
     import { updateSetting } from "$lib/state/settings";
+    import { turnstileLoaded } from "$lib/state/turnstile";
 
-    import type { DownloadModeOption } from "$lib/types/settings";
     import type { Optional } from "$lib/types/generic";
+    import type { DownloadModeOption } from "$lib/types/settings";
 
     import IconLink from "@tabler/icons-svelte/IconLink.svelte";
+    import IconLoader2 from "@tabler/icons-svelte/IconLoader2.svelte";
 
     import ClearButton from "$components/save/buttons/ClearButton.svelte";
     import DownloadButton from "$components/save/buttons/DownloadButton.svelte";
@@ -28,12 +31,11 @@
     import IconClipboard from "$components/icons/Clipboard.svelte";
 
     let linkInput: Optional<HTMLInputElement>;
-    let isFocused = false;
-
-    let isDisabled: boolean = false;
-
     let downloadButton: SvelteComponent;
 
+    let isFocused = false;
+    let isDisabled = false;
+
     const validLink = (url: string) => {
         try {
             return /^https:/i.test(new URL(url).protocol);
@@ -54,6 +56,14 @@
         goto("/", { replaceState: true });
     }
 
+    $: if (env.TURNSTILE_KEY) {
+        if ($turnstileLoaded) {
+            isDisabled = false;
+        } else {
+            isDisabled = true;
+        }
+    }
+
     const pasteClipboard = () => {
         if (isDisabled || $dialogs.length > 0) {
             return;
@@ -122,7 +132,11 @@
         class:focused={isFocused}
         class:downloadable={validLink($link)}
     >
+        {#if isDisabled}
+            <IconLoader2 id="input-link-icon" class="loading" />
+        {:else}
             <IconLink id="input-link-icon" />
+        {/if}
 
         <input
             id="link-area"
@@ -225,6 +239,19 @@
         stroke-width: 2px;
     }
 
+    :global(#input-link-icon.loading) {
+        animation: spin 0.7s infinite linear;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
     #input-container.focused :global(#input-link-icon) {
         stroke: var(--secondary);
     }

web/src/lib/state/turnstile.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const turnstileLoaded = writable(false);