How do I disable the Hilla loading indicator?

marcushellberg · May 9, 2024, 12:58am

I’m tracking and displaying the status of ongoing actions in my component on a fine-grained level. The app experience is worsened by the loading indicator flashing while long operations are ongoing. How can I disable it?

Tatu2 · May 10, 2024, 6:31am

Use this utility function

use:

loadingIndicator(0);

to hide it … or some number between 1…100 to show progress as you want.

github.com

TatuLund/hilla-demo/blob/hilla2/frontend/util/loading-indicator.ts

export function loadingIndicator(percent : number) : void {
  const indicator = document.getElementsByClassName("v-loading-indicator")[0] as HTMLElement;
  if (percent > 0) {
    indicator.style.display = "block";
    indicator.style.opacity = "1";
    indicator.style.animation = "unset";
    indicator.style.width = percent+"%";
    indicator.ariaLive = 'assertive';
    const label = document.createElement('label');
    label.innerText = 'Loading '+percent+"%";
    label.id = 'indicator-label'
    label.style.top = '-1000px';
    label.style.left = '-1000px';
    label.style.position = 'absolute';
    label.role = 'alert';
    indicator.innerText = '';
    indicator.appendChild(label);
    indicator.setAttribute('aria-labelledby','indicator-label');
  } else {
    indicator.style.display = "none";

This file has been truncated. show original

marcushellberg · May 10, 2024, 3:35pm

Thanks for the workaround. I’ll create a GH issue for an official way of configuring it.

Tatu2 · May 13, 2024, 8:30am

Just noting that this utility function adds another feature to the progress indicator, as you see it updates aria-tags for A11y. So when using this screen reader will announce the progress.