From c99240339dfb26b133d06b559c06ade095c2fec3 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 20 Sep 2024 15:20:25 +0600
Subject: [PATCH] web/Omnibox: allow input while antibot check is ongoing & fix
 spinner

---
 web/src/components/save/Omnibox.svelte        | 25 +++++++++++--------
 .../save/buttons/DownloadButton.svelte        |  2 ++
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index c641fc71..c8ad692d 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -36,6 +36,8 @@
 
     let isFocused = false;
     let isDisabled = false;
+    let isBotCheckOngoing = false;
+    let isLoading = false;
 
     const validLink = (url: string) => {
         try {
@@ -57,18 +59,18 @@
         goto("/", { replaceState: true });
     }
 
-    // FIXME: figure out why regular processing spinner
-    // doesn't show up after turnstile loads
     $: if ($cachedInfo?.info?.cobalt?.turnstileSitekey) {
         if ($turnstileLoaded) {
-            isDisabled = false;
+            isBotCheckOngoing = false;
         } else {
-            isDisabled = true;
+            isBotCheckOngoing = true;
         }
+    } else {
+        isBotCheckOngoing = false;
     }
 
     const pasteClipboard = () => {
-        if (isDisabled || $dialogs.length > 0) {
+        if ($dialogs.length > 0 || isDisabled || isLoading) {
             return;
         }
 
@@ -77,8 +79,10 @@
             if (matchLink) {
                 $link = matchLink[0];
 
-                await tick(); // wait for button to render
-                downloadButton.download($link);
+                if (!isBotCheckOngoing) {
+                    await tick(); // wait for button to render
+                    downloadButton.download($link);
+                }
             }
         });
     };
@@ -88,7 +92,7 @@
     };
 
     const handleKeydown = (e: KeyboardEvent) => {
-        if (!linkInput || $dialogs.length > 0 || isDisabled) {
+        if (!linkInput || $dialogs.length > 0 || isDisabled || isLoading) {
             return;
         }
 
@@ -135,8 +139,8 @@
         class:focused={isFocused}
         class:downloadable={validLink($link)}
     >
-        <div id="input-link-icon" class:loading={isDisabled}>
-            {#if isDisabled}
+        <div id="input-link-icon" class:loading={isLoading || isBotCheckOngoing}>
+            {#if isLoading || isBotCheckOngoing}
                 <IconLoader2 />
             {:else}
                 <IconLink />
@@ -168,6 +172,7 @@
                 url={$link}
                 bind:this={downloadButton}
                 bind:disabled={isDisabled}
+                bind:loading={isLoading}
             />
         {/if}
     </div>
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index 08800e88..e8d24f0f 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -10,6 +10,7 @@
 
     export let url: string;
     export let disabled = false;
+    export let loading = false;
 
     $: buttonText = ">>";
     $: buttonAltText = $t("a11y.save.download");
@@ -31,6 +32,7 @@
 
     const changeDownloadButton = (state: DownloadButtonState) => {
         disabled = state !== "idle";
+        loading = state === "think" || state === "check";
 
         buttonText = {
             idle: ">>",