https://littlebirdelectronics.com.au/assets/controllers/ecommerce/ultrasearch_controller-c0e627c7.js

1import { Controller } from "@hotwired/stimulus"
2
3// On Ultrasearch click, immediately swap the results frame for a skeleton so
4// there's feedback while the (cache-missable) semantic vector search runs
5// server-side. Turbo then replaces the skeleton with the real results when the
6// frame navigation lands. Scoped to the Ultrasearch button so live keyword
7// typing (which is fast) never flashes a skeleton.
8export default class extends Controller {
9  static values = { frame: { type: String, default: "product_results" } }
10
11  loading() {
12    const frame = document.getElementById(this.frameValue)
13    if (!frame) return
14    // Defer a tick so Turbo finishes reading this link (its href) and commits
15    // the frame navigation before we replace the frame's contents — otherwise
16    // we'd remove the clicked link mid-handling and cancel the navigation.
17    requestAnimationFrame(() => { frame.innerHTML = this.skeletonHTML() })
18  }
19
20  word() {
21    const chars = "Ultrasearch".split("")
22    return chars.map((c, i) => `<span style="--i: ${chars.length - 1 - i}" aria-hidden="true">${c}</span>`).join("")
23  }
24
25  skeletonHTML() {
26    const card = `
27      <div>
28        <div class="aspect-square rounded-xl bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
29        <div class="mt-3 space-y-2">
30          <div class="h-4 w-full rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
31          <div class="h-4 w-1/3 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
32        </div>
33      </div>`
34    return `
35      <div aria-busy="true">
36        <div class="mb-5 flex items-center gap-2 text-sm font-bold">
37          <span class="ultrasearch-text" aria-label="Ultrasearch">${this.word()}</span>
38          <span class="font-normal text-gray-400 dark:text-gray-500">searching by meaning…</span>
39        </div>
40        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">${card.repeat(8)}</div>
41      </div>`
42  }
43}