# loading-overlay — Examples

## Default (auto-stamped spinner)

The host parent must be positioned (`position: relative` or similar);
the overlay does not mutate parent layout. When the default slot is
empty, a centered `<spinner-ui size="lg">` is auto-stamped.

```html
<card-ui style="position: relative;">
  <section>
    <table-ui id="orders" data-stream-src="/api/orders"></table-ui>
    <loading-overlay-ui active label="Loading orders…"></loading-overlay-ui>
  </section>
</card-ui>
```

## Skeleton placeholder

Pair `variant="transparent"` with a slotted skeleton stack to render
shape-of-content placeholders instead of a centered spinner.

```html
<div style="position: relative;">
  <loading-overlay-ui active variant="transparent" label="Loading content">
    <stack-ui>
      <skeleton-ui width="100%" height="1rem"></skeleton-ui>
      <skeleton-ui width="80%"  height="1rem"></skeleton-ui>
      <skeleton-ui width="60%"  height="1rem"></skeleton-ui>
    </stack-ui>
  </loading-overlay-ui>
</div>
```

## Fast-load (no flash)

The default 200 ms grace window suppresses paint on fast-resolving
loads. If the underlying work resolves before the timer fires, the
overlay never paints.

```html
<loading-overlay-ui active delay="200"></loading-overlay-ui>
```

For known-slow operations (server-side jobs, large uploads) opt out
with `delay="0"`:

```html
<loading-overlay-ui active delay="0" label="Generating report…"></loading-overlay-ui>
```
