busy and timeout

Track a fetch element's request and set a time limit for it.

<form fetch="/api/save" method="post" busy="#form.saving" timeout="10s">
  <ui-button type="submit" _disabled="#form.saving">Save</ui-button>
</form>

Attributes

Attribute Type Default Meaning
busy writable reference none Set to true when a request starts and false when the latest one ends
timeout duration none Abort the request after this long and fire timeout instead of abort

While a request runs

What Value
busy reference true
aria-busy on the element "true", removed afterwards (with or without busy)
:state(loading) on the component host Present while any request in the component runs

When a newer request replaces a running one, busy stays true until the newer one ends.

Example

Previewindex.htmlslow-save.html
Load Loading… 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>busy and timeout demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>

  <import-element from="./slow-save.html"></import-element>

  <slow-save></slow-save>
</body>
</html>
<custom-element name="slow-save">
  <script>
    const form = useState({ saving: false, result: "" });
  </script>

  <style>
    :host {
      display: flex;
      gap: calc(var(--spacing) * 3);
      align-items: center;
    }
    :host(:state(loading)) output {
      color: var(--muted-foreground);
    }
  </style>

  <ui-button fetch="http://realm.js.org/search-index.json" busy="#form.saving" timeout="5s" _disabled="#form.saving" onload="form.result = 'Done'">Load</ui-button>
  <output><is-visible when="#form.saving">Loading…</is-visible><slot name="#form.result"></slot></output>
</custom-element>

Edit this page on GitHub · View as Markdown