feat: debounce and spin autocomplete

.changeset/few-actors-peel.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-shoelace": patch
+---
+
+To not trigger search immediately when typing in auto complete editor

.changeset/polite-ducks-divide.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-shoelace": patch
+---
+
+When loading, chage the icon to spinning arrows

packages/wc-shoelace/README.md

@@ -2,13 +2,15 @@
 
 ## Properties
 
-| Property     | Attribute    | Type                                             | Default |
-|--------------|--------------|--------------------------------------------------|---------|
-| `empty`      | `empty`      | `boolean`                                        | true    |
-| `hoist`      | `hoist`      | `boolean`                                        | true    |
-| `inputValue` | `inputValue` | `string`                                         | ""      |
-| `readonly`   | `readonly`   | `boolean`                                        | false   |
-| `selected`   | `selected`   | `GraphPointer<Term, DatasetCore<Quad, Quad>> \| undefined` |         |
+| Property          | Attribute          | Type                                             | Default |
+|-------------------|--------------------|--------------------------------------------------|---------|
+| `debounceTimeout` | `debounce-timeout` | `number`                                         | 350     |
+| `empty`           | `empty`            | `boolean`                                        | true    |
+| `hoist`           | `hoist`            | `boolean`                                        | true    |
+| `inputValue`      | `inputValue`       | `string`                                         | ""      |
+| `loading`         | `loading`          | `boolean \| undefined`                           |         |
+| `readonly`        | `readonly`         | `boolean`                                        | false   |
+| `selected`        | `selected`         | `GraphPointer<Term, DatasetCore<Quad, Quad>> \| undefined` |         |
 
 ## Methods
 

packages/wc-shoelace/components/autocomplete.ts

@@ -37,7 +37,7 @@ export const autocomplete: Lazy<AutoCompleteEditor> & Options = {
       const { value, property } = params
       const pointers = value.componentState.instances || []
       const freetextQuery = value.componentState.freetextQuery || ''
-      const { selected } = value.componentState
+      const { selected, loading } = value.componentState
 
       const search = (e: CustomEvent) => {
         params.updateComponentState({
@@ -71,6 +71,7 @@ export const autocomplete: Lazy<AutoCompleteEditor> & Options = {
                             @itemSelected=${itemSelected}
                             .readonly="${property.shape.readOnly || false}"
                             .hoist="${settings.hoist}"
+                            ?loading="${loading || false}"
         >
           ${repeat(pointers, renderItem)}
         </sh-sl-autocomplete>`

packages/wc-shoelace/custom-elements.json

@@ -28,6 +28,15 @@
           "name": "readonly",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "debounce-timeout",
+          "type": "number",
+          "default": "350"
+        },
+        {
+          "name": "loading",
+          "type": "boolean | undefined"
         }
       ],
       "properties": [
@@ -59,6 +68,17 @@
           "attribute": "readonly",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "debounceTimeout",
+          "attribute": "debounce-timeout",
+          "type": "number",
+          "default": "350"
+        },
+        {
+          "name": "loading",
+          "attribute": "loading",
+          "type": "boolean | undefined"
         }
       ],
       "events": [

packages/wc-shoelace/elements/sh-sl-autocomplete.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import type { GraphPointer } from 'clownface'
 import { SlInput } from '@shoelace-style/shoelace'
+import debounce from 'p-debounce'
 import { stop } from '../lib/handlers.js'
 import '@shoelace-style/shoelace/dist/components/input/input.js'
 import '@shoelace-style/shoelace/dist/components/icon/icon.js'
@@ -16,33 +17,60 @@ export class ShSlAutocomplete extends LitElement {
       [hidden] {
         display: none;
       }
+
+      :host([loading]) sl-input sl-icon {
+        animation-name: spin;
+        animation-duration: 500ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+      }
+
+      @keyframes spin {
+        from {
+          transform:rotate(0deg);
+        }
+        to {
+          transform:rotate(360deg);
+        }
+      }
+
+      sl-input sl-icon[slot=suffix] {
+        padding-right: 0;
+        margin-right: var(--sl-input-spacing-medium);
+      }
     `
   }
 
   @property({ type: Object })
-    selected?: GraphPointer
+  public selected?: GraphPointer
 
   @property({ type: String })
-    inputValue = ''
+  public inputValue = ''
 
   @property({ type: Boolean })
-    empty = true
+  public empty = true
 
   @property({ type: Boolean })
-    hoist = true
+  public hoist = true
 
   @property({ type: Boolean })
   public readonly = false
 
+  @property({ type: Number, attribute: 'debounce-timeout' })
+  public debounceTimeout = 350
+
+  @property({ type: Boolean, reflect: true })
+  public loading?: boolean
+
   @query('sl-input')
-    _input!: SlInput
+  private _input!: SlInput
 
   render() {
     return html`<sl-dropdown @sl-hide=${stop} ?hoist="${this.hoist}" .disabled="${this.readonly}">
       <sl-input slot="trigger"
                 .value=${this.inputValue}
-                @sl-input="${this.dispatchSearch}">
-        <sl-icon name="search" slot="suffix"></sl-icon>
+                @sl-input="${debounce(this.dispatchSearch, this.debounceTimeout)}">
+        <sl-icon name="${this.loading ? 'arrow-repeat' : 'search'}" slot="suffix"></sl-icon>
       </sl-input>
       <sl-menu hoist .value=${this.selected?.value}
                ?hidden="${this.empty}"

packages/wc-shoelace/package.json

@@ -27,7 +27,8 @@
     "@shoelace-style/shoelace": "^2.0.0-beta.77",
     "@tpluscode/rdf-ns-builders": "^2",
     "is-graph-pointer": "^1.2.2",
-    "lit": "^2"
+    "lit": "^2",
+    "p-debounce": "^4"
   },
   "devDependencies": {
     "@open-wc/testing": "^3.1.6",

packages/wc-shoelace/test/components/autocomplete.test.ts

@@ -57,4 +57,21 @@ describe('wc-shoelace/components/autocomplete', () => {
     // then
     expect(result.readonly).to.be.true
   })
+
+  it('sets loading attribute', async () => {
+    // given
+    const graph = cf({ dataset: $rdf.dataset() })
+    const { params, actions } = editorTestParams<AutoComplete>({
+      object: graph.literal(''),
+      componentState: {
+        loading: true,
+      },
+    })
+
+    // when
+    const result = await fixture<ShSlAutocomplete>(component.render(params, actions))
+
+    // then
+    expect(result).to.have.attr('loading')
+  })
 })

packages/wc-shoelace/test/elements/sh-sl-autocomplete.test.ts

@@ -26,4 +26,12 @@ describe('wc-shoelace/elements/sh-sl-autocomplete', () => {
     // expect
     expect(el.renderRoot.querySelector('sl-dropdown')?.disabled).to.be.true
   })
+
+  it('spins the icon when [loading]', async () => {
+    // when
+    const el = await fixture<ShSlAutocomplete>(html`<sh-sl-autocomplete loading></sh-sl-autocomplete>`)
+
+    // expect
+    expect(el.renderRoot.querySelector('sl-input sl-icon')).to.have.style('animation-name', 'spin')
+  })
 })

yarn.lock

@@ -10493,6 +10493,11 @@ p-cancelable@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
   integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
 
+p-debounce@^4:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-debounce/-/p-debounce-4.0.0.tgz#348e3f44489baa9435cc7d807f17b3bb2fb16b24"
+  integrity sha512-4Ispi9I9qYGO4lueiLDhe4q4iK5ERK8reLsuzH6BPaXn53EGaua8H66PXIFGrW897hwjXp+pVLrm/DLxN0RF0A==
+
 p-event@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/p-event/-/p-event-4.2.0.tgz#af4b049c8acd91ae81083ebd1e6f5cae2044c1b5"