From c67132d2cc95f53b5fedcba0e65fd6fe9582667d Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 18 Nov 2024 21:06:19 +0600
Subject: [PATCH] web/Omnibox: add a cool animation to input icons

---
 web/src/components/save/Omnibox.svelte     | 44 ++----------
 web/src/components/save/OmniboxIcon.svelte | 78 ++++++++++++++++++++++
 2 files changed, 82 insertions(+), 40 deletions(-)
 create mode 100644 web/src/components/save/OmniboxIcon.svelte

diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 8b0b443c..a1e9873a 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -17,13 +17,11 @@
     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";
 
     import Switcher from "$components/buttons/Switcher.svelte";
+    import OmniboxIcon from "$components/save/OmniboxIcon.svelte";
     import ActionButton from "$components/buttons/ActionButton.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
 
@@ -142,17 +140,7 @@
         class:focused={isFocused}
         class:downloadable={validLink($link)}
     >
-        <div
-            id="input-link-icon"
-            class:loading={isLoading || isBotCheckOngoing}
-        >
-            {#if isLoading || isBotCheckOngoing}
-                <IconLoader2 />
-            {:else}
-                <IconLink />
-            {/if}
-        </div>
-
+        <OmniboxIcon loading={isLoading || isBotCheckOngoing} />
         <input
             id="link-area"
             bind:value={$link}
@@ -250,35 +238,11 @@
         outline: var(--secondary) 0.5px solid;
     }
 
-    #input-link-icon {
-        display: flex;
-    }
-
-    #input-link-icon :global(svg) {
-        stroke: var(--gray);
-        width: 18px;
-        height: 18px;
-        stroke-width: 2px;
-    }
-
-    #input-link-icon.loading :global(svg) {
-        animation: spin 0.7s infinite linear;
-    }
-
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-
-    #input-container.focused #input-link-icon :global(svg) {
+    #input-container.focused :global(#input-icons svg) {
         stroke: var(--secondary);
     }
 
-    #input-container.downloadable #input-link-icon :global(svg) {
+    #input-container.downloadable :global(#input-icons svg) {
         stroke: var(--secondary);
     }
 
diff --git a/web/src/components/save/OmniboxIcon.svelte b/web/src/components/save/OmniboxIcon.svelte
new file mode 100644
index 00000000..49d673c6
--- /dev/null
+++ b/web/src/components/save/OmniboxIcon.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import IconLink from "@tabler/icons-svelte/IconLink.svelte";
+    import IconLoader2 from "@tabler/icons-svelte/IconLoader2.svelte";
+
+    export let loading: boolean;
+</script>
+
+<div id="input-icons" class:loading>
+    <div class="input-icon spinner-icon">
+        <IconLoader2 />
+    </div>
+    <div class="input-icon link-icon">
+        <IconLink />
+    </div>
+</div>
+
+<style>
+    #input-icons {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+    }
+
+    #input-icons :global(svg) {
+        stroke: var(--gray);
+        width: 18px;
+        height: 18px;
+        stroke-width: 2px;
+    }
+
+    .input-icon {
+        display: flex;
+        position: absolute;
+        transition:
+            transform 0.25s,
+            opacity 0.25s;
+    }
+
+    .link-icon {
+        transform: none;
+        opacity: 1;
+    }
+
+    .spinner-icon {
+        transform: scale(0.4);
+        opacity: 0;
+    }
+
+    .spinner-icon :global(svg) {
+        animation: spin 0.7s infinite linear;
+    }
+
+    .loading .link-icon :global(svg) {
+        animation: spin 0.7s infinite linear;
+    }
+
+    .loading .link-icon {
+        transform: scale(0.4);
+        opacity: 0;
+    }
+
+    .loading .spinner-icon {
+        transform: none;
+        opacity: 1;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>