feat: add spinner to Selector

webui/src/components/utils/Selector.svelte

@@ -89,6 +89,7 @@
   import { ATTR_LABEL } from "@upnd/upend/constants";
   import { i18n } from "../../i18n";
   import debug from "debug";
+  import Spinner from "./Spinner.svelte";
 
   const dispatch = createEventDispatcher();
   const dbg = debug("kestrel:Selector");
@@ -111,6 +112,7 @@
 
   export let initial: SelectorValue | undefined = undefined;
   let inputValue = "";
+  let updating = false;
 
   $: setInitial(initial);
   function setInitial(initial: SelectorValue | undefined) {
@@ -143,10 +145,12 @@
   let options: SelectorOption[] = [];
   let searchResult: UpListing | undefined = undefined;
   const updateOptions = debounce(async (query: string, doSearch: boolean) => {
+    updating = true;
     let result = [];
 
     if (query.length === 0 && emptyOptions !== undefined) {
       options = emptyOptions;
+      updating = false;
       return;
     }
 
@@ -259,6 +263,7 @@
     }
 
     options = result;
+    updating = false;
   }, 200);
 
   $: dbg("%o Options: %O", selectorEl, options);
@@ -393,7 +398,8 @@
   let inputFocused = false;
   let hover = false; // otherwise clicking makes options disappear faster than it can emit a set
   $: visible =
-    (inputFocused || hover || optionFocusIndex > -1) && Boolean(options.length);
+    (inputFocused || hover || optionFocusIndex > -1) &&
+    Boolean(options.length || updating);
   $: dispatch("focus", inputFocused || hover || optionFocusIndex > -1);
 
   $: dbg(
@@ -432,6 +438,9 @@
     on:mouseleave={() => (hover = false)}
     bind:this={listEl}
   >
+    {#if updating}
+      <li><Spinner centered /></li>
+    {/if}
     {#each options.slice(0, MAX_OPTIONS) as option, idx}
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <li