Loading

Wraps any content and turns it into its own shimmering skeleton while loading is true. The placeholder follows the shape of whatever children you pass — headings, paragraphs, buttons, avatars, cards — so the same markup serves as both the real content and its skeleton.

Text becomes one bar per line, as wide as that line’s text — wrapped paragraphs, inline markup (<p>Hello <strong>world</strong></p>) and bare text beside a nested block included. The bars are drawn as text decorations, so their ends are square. The skeleton pulses its opacity instead of sweeping a gradient — a gentle breathe (to 60% over a 2s cycle). Text placed directly in Loading, outside any element, is hidden without a bar.
Images and video keep their box and shimmer inside it.
Empty decorative elements (spacers, separators) are left alone.
Bars keep each component’s own colour — a success badge shimmers green, a primary button blue — while plain text follows the region’s colorPalette (neutral by default). The tint is translucent, so it reads on any surface in light and dark mode.

Rendered without children, <Loading /> is a standalone spinner (see Standalone spinner).

Which variant, and when

Two loading semantics, picked with the variant prop:

skeleton (default) — you don’t have the content yet. Every descendant is replaced with shimmer so the user sees the shape of what’s loading. Reach for this on first render, after a navigation, or when the content structure is known but the data isn’t.
busy — you already have the content, but an action is in flight (saving a form, refreshing a feed, running a search, a button’s request). The content stays exactly as it is — nothing pulses, so nothing swings its contrast — and an indicator says it’s working. Users keep their context, they just can’t interact until it resolves.

Rule of thumb: if the user has never seen this content before, use skeleton. If they’re waiting for the same content to update, use busy.

Picking the wrapper element

Loading renders its root with display: contents, so the wrapper disappears from layout and the children sit directly in their natural flow (the bar and overlay indicators are the exception: they stack over the content, so the root becomes a one-cell grid). Wrap at the granularity you want the loading state to cover:

Wrapping a single card gives you a card-level skeleton.
Wrapping a list wrapper gives you a list-level skeleton — each row already composes into its own shape.
Wrapping a form lets you show busy across the whole form including its submit button.
Wrapping a single button with indicator="inline" gives you a loading button (see Buttons).

Per-child overrides

For the rare mixed cases, drop data-loading-as on any descendant to change the treatment locally:

data-loading-as="skeleton" — force skeleton on this subtree even if the ancestor is busy (e.g. a stat number that’s still being computed while the rest of the form blurs).
data-loading-as="busy" — keep this subtree as it is inside a skeleton (e.g. a persistent “Saving…” button that stays readable); still inert.
data-loading-as="none" — opt a subtree out entirely (e.g. a progress bar or spinner that drives the loading state itself). An opted-out element stays fully visible and still. Text beside it in the same parent still gets a bar, down to two levels below the content’s top-level elements; deeper than that, the neighbouring text is hidden without one.

Works with any component

Loading never needs to know which components it wraps. A component tells it how to draw itself through the shape contract: its connect bakes data-loading-shape onto its root.

`data-loading-shape`	Treatment
`block`	One shimmer block in the component’s own shape (radius included); its inner text and icons are hidden
`circle`	A `block` with a fully rounded radius (avatars, round stamps)
`skip`	Left out of the shimmer entirely (live regions, decorative indicators)
(absent)	Walked like plain markup: text becomes line bars, media shimmers in place

A new component opts in with one attribute in its own connect — the loading recipe never lists components. Components that don’t carry the attribute yet fall back to built-in detection (buttons, badges, stamps, checkboxes, radios, alerts and wrapped form controls become blocks).

Portaled layers (an open popover or tooltip) render outside the region, so they are not shimmered. The inert content can’t open new ones.

Accessibility

The root gets aria-busy="true" while loading.
The content sits in an inert wrapper, so keyboard focus can’t land on a placeholder and stale or fake content leaves the accessibility tree.
A visually hidden polite status region outside that wrapper announces label (default "Loading") when loading starts. Pass a translated label for other languages.
The shimmer animations respect prefers-reduced-motion and collapse to a static state.

Default

Toggle the loading state — the same markup serves as both the real content and its skeleton. Every line of text becomes a bar exactly as long as its words, inline markup and links included, with nothing extra in the markup. Plain text has no busy treatment — busy keeps text readable and as it is — so this demo only shows skeleton; the demos below pair it with components.

PreviewCode

Planning the spring trip

The team meets in Lisbon for three days in April. Flights are booked for Tuesday morning, and the venue near the river holds up to forty people with room for breakout sessions.

Send dietary needs to Marta by Friday, and add your talk to the shared agenda so we can plan the schedule.

---
// GENERATED from packages/demos/loading/default.demo.tsx — edit the source, not this file.
import Loading from "@pindoba/astro-loading";
import Checkbox from "@pindoba/astro-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const loading = true;
---

<div
  class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}
  data-ir-root="loading/default"
>
  <Checkbox
    id="astro-demo-loading-default-toggle"
    appearance="switch"
    checked
    data-ir="1"
  >
    Loading
  </Checkbox>

  <Loading loading={loading} data-ir="2">
    <article>
      <h3 class={css({ fontSize: "xl", fontWeight: "bold", mb: "sm" })}>
        Planning the spring trip
      </h3>
      <p class={css({ mb: "sm" })}>
        The team meets in Lisbon for three days in April. Flights are booked for
        Tuesday morning, and the venue near the river holds up to forty people
        with room for breakout sessions.
      </p>
      <p>
        Send dietary needs to <strong>Marta</strong> by Friday, and add your
        talk to the <a href="#agenda">shared agenda</a> so we can plan the
        schedule.
      </p>
    </article>
  </Loading>
</div>

<script>
  import { hydrate } from "./_client/default.ts";

  document
    .querySelectorAll('[data-ir-root="loading/default"]')
    .forEach((root) => hydrate([root]));
</script>

Planning the spring trip

The team meets in Lisbon for three days in April. Flights are booked for Tuesday morning, and the venue near the river holds up to forty people with room for breakout sessions.

Send dietary needs to Marta by Friday, and add your talk to the shared agenda so we can plan the schedule.

// GENERATED from packages/demos/loading/default.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Loading } from "@pindoba/react-loading";
import { Checkbox } from "@pindoba/react-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function DefaultDemo() {
  const [loading, setLoading] = useState(true);
  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <Checkbox
        id="react-demo-loading-default-toggle"
        appearance="switch"
        checked={loading}
        onChange={(e) => setLoading(e.currentTarget.checked)}
      >
        Loading
      </Checkbox>

      <Loading loading={loading}>
        <article>
          <h3 className={css({ fontSize: "xl", fontWeight: "bold", mb: "sm" })}>
            Planning the spring trip
          </h3>
          <p className={css({ mb: "sm" })}>
            The team meets in Lisbon for three days in April. Flights are booked
            for Tuesday morning, and the venue near the river holds up to forty
            people with room for breakout sessions.
          </p>
          <p>
            Send dietary needs to <strong>Marta</strong> by Friday, and add your
            talk to the <a href="#agenda">shared agenda</a> so we can plan the
            schedule.
          </p>
        </article>
      </Loading>
    </div>
  );
}

Planning the spring trip

The team meets in Lisbon for three days in April. Flights are booked for Tuesday morning, and the venue near the river holds up to forty people with room for breakout sessions.

Send dietary needs to Marta by Friday, and add your talk to the shared agenda so we can plan the schedule.

<script lang="ts">
  // GENERATED from packages/demos/loading/default.demo.tsx — edit the source, not this file.
  import Loading from "@pindoba/svelte-loading";
  import Checkbox from "@pindoba/svelte-checkbox";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  let loading = $state(true);
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <Checkbox
    id="svelte-demo-loading-default-toggle"
    appearance="switch"
    bind:checked={loading}
  >
    Loading
  </Checkbox>

  <Loading {loading}>
    <article>
      <h3 class={css({ fontSize: "xl", fontWeight: "bold", mb: "sm" })}>
        Planning the spring trip
      </h3>
      <p class={css({ mb: "sm" })}>
        The team meets in Lisbon for three days in April. Flights are booked for
        Tuesday morning, and the venue near the river holds up to forty people
        with room for breakout sessions.
      </p>
      <p>
        Send dietary needs to <strong> Marta </strong> by Friday, and add your
        talk to the <a href="#agenda"> shared agenda </a> so we can plan the schedule.
      </p>
    </article>
  </Loading>
</div>

Planning the spring trip

The team meets in Lisbon for three days in April. Flights are booked for Tuesday morning, and the venue near the river holds up to forty people with room for breakout sessions.

Send dietary needs to Marta by Friday, and add your talk to the shared agenda so we can plan the schedule.

<script setup lang="ts">
// GENERATED from packages/demos/loading/default.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const loading = ref(true);
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <Checkbox
      id="vue-demo-loading-default-toggle"
      appearance="switch"
      :checked="loading"
      :onChange="
        (e: Event) => (loading = (e.target as HTMLInputElement).checked)
      "
    >
      Loading
    </Checkbox>

    <Loading :loading="loading">
      <article>
        <h3 :class="css({ fontSize: 'xl', fontWeight: 'bold', mb: 'sm' })">
          Planning the spring trip
        </h3>
        <p :class="css({ mb: 'sm' })">
          The team meets in Lisbon for three days in April. Flights are booked
          for Tuesday morning, and the venue near the river holds up to forty
          people with room for breakout sessions.
        </p>
        <p>
          Send dietary needs to <strong>Marta</strong> by Friday, and add your
          talk to the <a href="#agenda">shared agenda</a> so we can plan the
          schedule.
        </p>
      </article>
    </Loading>
  </div>
</template>

Planning the spring trip

The team meets in Lisbon for three days in April. Flights are booked for Tuesday morning, and the venue near the river holds up to forty people with room for breakout sessions.

Send dietary needs to Marta by Friday, and add your talk to the shared agenda so we can plan the schedule.

// GENERATED from packages/demos/loading/default.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Loading } from "@pindoba/solid-loading";
import { Checkbox } from "@pindoba/solid-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function DefaultDemo() {
  const [loading, setLoading] = createSignal(true);
  return (
    <div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <Checkbox
        id="solid-demo-loading-default-toggle"
        appearance="switch"
        checked={loading()}
        onChange={(e) => setLoading(e.currentTarget.checked)}
      >
        Loading
      </Checkbox>

      <Loading loading={loading()}>
        <article>
          <h3 class={css({ fontSize: "xl", fontWeight: "bold", mb: "sm" })}>
            Planning the spring trip
          </h3>
          <p class={css({ mb: "sm" })}>
            The team meets in Lisbon for three days in April. Flights are booked
            for Tuesday morning, and the venue near the river holds up to forty
            people with room for breakout sessions.
          </p>
          <p>
            Send dietary needs to <strong>Marta</strong> by Friday, and add your
            talk to the <a href="#agenda">shared agenda</a> so we can plan the
            schedule.
          </p>
        </article>
      </Loading>
    </div>
  );
}

Card

A profile card composed of Card, Badge and Button. In skeleton everything inside the card becomes a placeholder without extra markup; switch to busy and the card stays as it is under the overlay, which says it’s working.

PreviewCode

Loading Variant

Analytical Engine

Ada Lovelace · 1843

ResearchPublished

The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform.

---
// GENERATED from packages/demos/loading/card.demo.tsx — edit the source, not this file.
import Loading from "@pindoba/astro-loading";
import Card from "@pindoba/astro-card";
import Button from "@pindoba/astro-button";
import Badge from "@pindoba/astro-badge";
import Checkbox from "@pindoba/astro-checkbox";
import SelectNative from "@pindoba/astro-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

const loading = true;
const variant = "skeleton" as "skeleton" | "busy";
---

<div
  class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}
  data-ir-root="loading/card"
>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="astro-demo-loading-card-toggle"
      appearance="switch"
      checked
      data-ir="1"
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span>Variant</span>
      <SelectNative
        items={variants}
        value={"skeleton" as "skeleton" | "busy"}
        autocomplete="off"
        data-ir="2"
      />
    </label>
  </div>

  <Loading loading={loading} variant={variant} data-ir="3">
    <Card
      header={{
        heading: "Analytical Engine",
        subheading: "Ada Lovelace · 1843",
      }}
    >
      <div class={stack({ gap: "md", direction: "column" })}>
        <div class={hstack({ gap: "xs", flexWrap: "wrap" })}>
          <Badge tone="primary">Research</Badge>
          <Badge tone="success">Published</Badge>
        </div>
        <p class={css({ margin: "0" })}>
          The Analytical Engine has no pretensions whatever to originate
          anything. It can do whatever we know how to order it to perform.
        </p>
        <div class={hstack({ gap: "sm" })}>
          <Button emphasis="primary">Read more</Button>
          <Button emphasis="ghost">Share</Button>
        </div>
      </div>
    </Card>
  </Loading>
</div>

<script>
  import { hydrate } from "./_client/card.ts";

  document
    .querySelectorAll('[data-ir-root="loading/card"]')
    .forEach((root) => hydrate([root]));
</script>

LoadingVariant

Analytical Engine

Ada Lovelace · 1843

ResearchPublished

The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform.

// GENERATED from packages/demos/loading/card.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Loading } from "@pindoba/react-loading";
import { Card } from "@pindoba/react-card";
import { Button } from "@pindoba/react-button";
import { Badge } from "@pindoba/react-badge";
import { Checkbox } from "@pindoba/react-checkbox";
import { SelectNative } from "@pindoba/react-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
export default function CardDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState("skeleton" as "skeleton" | "busy");
  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-demo-loading-card-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autoComplete="off"
          />
        </label>
      </div>

      <Loading loading={loading} variant={variant}>
        <Card
          header={{
            heading: "Analytical Engine",
            subheading: "Ada Lovelace · 1843",
          }}
        >
          <div className={stack({ gap: "md", direction: "column" })}>
            <div className={hstack({ gap: "xs", flexWrap: "wrap" })}>
              <Badge tone="primary">Research</Badge>
              <Badge tone="success">Published</Badge>
            </div>
            <p className={css({ margin: "0" })}>
              The Analytical Engine has no pretensions whatever to originate
              anything. It can do whatever we know how to order it to perform.
            </p>
            <div className={hstack({ gap: "sm" })}>
              <Button emphasis="primary">Read more</Button>
              <Button emphasis="ghost">Share</Button>
            </div>
          </div>
        </Card>
      </Loading>
    </div>
  );
}

Loading Variant

Analytical Engine

Ada Lovelace · 1843

Research Published

The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform.

<script lang="ts">
  // GENERATED from packages/demos/loading/card.demo.tsx — edit the source, not this file.
  import Loading from "@pindoba/svelte-loading";
  import Card from "@pindoba/svelte-card";
  import Button from "@pindoba/svelte-button";
  import Badge from "@pindoba/svelte-badge";
  import Checkbox from "@pindoba/svelte-checkbox";
  import SelectNative from "@pindoba/svelte-select-native";
  import { stack, hstack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];

  let loading = $state(true);
  let variant = $state("skeleton" as "skeleton" | "busy");
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-demo-loading-card-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span> Variant </span>
      <SelectNative items={variants} bind:value={variant} autocomplete="off"
      ></SelectNative>
    </label>
  </div>

  <Loading {loading} {variant}>
    <Card
      header={{
        heading: "Analytical Engine",
        subheading: "Ada Lovelace · 1843",
      }}
    >
      <div class={stack({ gap: "md", direction: "column" })}>
        <div class={hstack({ gap: "xs", flexWrap: "wrap" })}>
          <Badge tone="primary">Research</Badge>
          <Badge tone="success">Published</Badge>
        </div>
        <p class={css({ margin: "0" })}>
          The Analytical Engine has no pretensions whatever to originate
          anything. It can do whatever we know how to order it to perform.
        </p>
        <div class={hstack({ gap: "sm" })}>
          <Button emphasis="primary">Read more</Button>
          <Button emphasis="ghost">Share</Button>
        </div>
      </div>
    </Card>
  </Loading>
</div>

Loading Variant

Analytical Engine

Ada Lovelace · 1843

ResearchPublished

The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform.

<script setup lang="ts">
// GENERATED from packages/demos/loading/card.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Card } from "@pindoba/vue-card";
import { Button } from "@pindoba/vue-button";
import { Badge } from "@pindoba/vue-badge";
import { Checkbox } from "@pindoba/vue-checkbox";
import { SelectNative } from "@pindoba/vue-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

const loading = ref(true);
const variant = ref("skeleton" as "skeleton" | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-demo-loading-card-toggle"
        appearance="switch"
        :checked="loading"
        :onChange="
          (e: Event) => (loading = (e.target as HTMLInputElement).checked)
        "
      >
        Loading
      </Checkbox>
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative
          :items="variants"
          :value="variant"
          :onChange="
            (e: Event) =>
              (variant = (e.target as HTMLSelectElement).value as never)
          "
          autocomplete="off"
        ></SelectNative>
      </label>
    </div>

    <Loading :loading="loading" :variant="variant">
      <Card
        :header="{
          heading: 'Analytical Engine',
          subheading: 'Ada Lovelace · 1843',
        }"
      >
        <div :class="stack({ gap: 'md', direction: 'column' })">
          <div :class="hstack({ gap: 'xs', flexWrap: 'wrap' })">
            <Badge tone="primary">Research</Badge>
            <Badge tone="success">Published</Badge>
          </div>
          <p :class="css({ margin: '0' })">
            The Analytical Engine has no pretensions whatever to originate
            anything. It can do whatever we know how to order it to perform.
          </p>
          <div :class="hstack({ gap: 'sm' })">
            <Button emphasis="primary">Read more</Button>
            <Button emphasis="ghost">Share</Button>
          </div>
        </div>
      </Card>
    </Loading>
  </div>
</template>

LoadingVariant

Analytical Engine

Ada Lovelace · 1843

ResearchPublished

The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform.

// GENERATED from packages/demos/loading/card.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Loading } from "@pindoba/solid-loading";
import { Card } from "@pindoba/solid-card";
import { Button } from "@pindoba/solid-button";
import { Badge } from "@pindoba/solid-badge";
import { Checkbox } from "@pindoba/solid-checkbox";
import { SelectNative } from "@pindoba/solid-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
export default function CardDemo() {
  const [loading, setLoading] = createSignal(true);
  const [variant, setVariant] = createSignal("skeleton" as "skeleton" | "busy");
  return (
    <div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}
      >
        <Checkbox
          id="solid-demo-loading-card-toggle"
          appearance="switch"
          checked={loading()}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label class={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant()}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autocomplete="off"
          />
        </label>
      </div>

      <Loading loading={loading()} variant={variant()}>
        <Card
          header={{
            heading: "Analytical Engine",
            subheading: "Ada Lovelace · 1843",
          }}
        >
          <div class={stack({ gap: "md", direction: "column" })}>
            <div class={hstack({ gap: "xs", flexWrap: "wrap" })}>
              <Badge tone="primary">Research</Badge>
              <Badge tone="success">Published</Badge>
            </div>
            <p class={css({ margin: "0" })}>
              The Analytical Engine has no pretensions whatever to originate
              anything. It can do whatever we know how to order it to perform.
            </p>
            <div class={hstack({ gap: "sm" })}>
              <Button emphasis="primary">Read more</Button>
              <Button emphasis="ghost">Share</Button>
            </div>
          </div>
        </Card>
      </Loading>
    </div>
  );
}

Loading over messaging components like Banner and Alert. In skeleton each alert collapses into one block and its icon is hidden; in busy the alerts stay exactly as they are.

PreviewCode

Loading Variant

Workspace usage

You have used 62% of your monthly quota.

Your profile changes were saved successfully and published to the team.

Billing cycle ends in 3 days. Review your plan before renewal.

---
// GENERATED from packages/demos/loading/banner.demo.tsx — edit the source, not this file.
import Loading from "@pindoba/astro-loading";
import Banner from "@pindoba/astro-banner";
import Alert from "@pindoba/astro-alert";
import Checkbox from "@pindoba/astro-checkbox";
import SelectNative from "@pindoba/astro-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

const loading = true;
const variant = "skeleton" as "skeleton" | "busy";
---

<div
  class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}
  data-ir-root="loading/banner"
>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="astro-demo-loading-banner-toggle"
      appearance="switch"
      checked
      data-ir="1"
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span>Variant</span>
      <SelectNative
        items={variants}
        value={"skeleton" as "skeleton" | "busy"}
        autocomplete="off"
        data-ir="2"
      />
    </label>
  </div>

  <Loading loading={loading} variant={variant} data-ir="3">
    <div class={stack({ gap: "md", direction: "column" })}>
      <Banner
        heading="Workspace usage"
        subheading="You have used 62% of your monthly quota."
      />
      <Alert tone="success">
        Your profile changes were saved successfully and published to the team.
      </Alert>
      <Alert tone="warning">
        Billing cycle ends in 3 days. Review your plan before renewal.
      </Alert>
    </div>
  </Loading>
</div>

<script>
  import { hydrate } from "./_client/banner.ts";

  document
    .querySelectorAll('[data-ir-root="loading/banner"]')
    .forEach((root) => hydrate([root]));
</script>

LoadingVariant

Workspace usage

You have used 62% of your monthly quota.

Your profile changes were saved successfully and published to the team.

Billing cycle ends in 3 days. Review your plan before renewal.

// GENERATED from packages/demos/loading/banner.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Loading } from "@pindoba/react-loading";
import { Banner } from "@pindoba/react-banner";
import { Alert } from "@pindoba/react-alert";
import { Checkbox } from "@pindoba/react-checkbox";
import { SelectNative } from "@pindoba/react-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
export default function BannerDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState("skeleton" as "skeleton" | "busy");
  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-demo-loading-banner-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autoComplete="off"
          />
        </label>
      </div>

      <Loading loading={loading} variant={variant}>
        <div className={stack({ gap: "md", direction: "column" })}>
          <Banner
            heading="Workspace usage"
            subheading="You have used 62% of your monthly quota."
          />
          <Alert tone="success">
            Your profile changes were saved successfully and published to the
            team.
          </Alert>
          <Alert tone="warning">
            Billing cycle ends in 3 days. Review your plan before renewal.
          </Alert>
        </div>
      </Loading>
    </div>
  );
}

Loading Variant

Workspace usage

You have used 62% of your monthly quota.

Your profile changes were saved successfully and published to the team.

Billing cycle ends in 3 days. Review your plan before renewal.

<script lang="ts">
  // GENERATED from packages/demos/loading/banner.demo.tsx — edit the source, not this file.
  import Loading from "@pindoba/svelte-loading";
  import Banner from "@pindoba/svelte-banner";
  import Alert from "@pindoba/svelte-alert";
  import Checkbox from "@pindoba/svelte-checkbox";
  import SelectNative from "@pindoba/svelte-select-native";
  import { stack, hstack } from "@pindoba/styled-system/patterns";

  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];

  let loading = $state(true);
  let variant = $state("skeleton" as "skeleton" | "busy");
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-demo-loading-banner-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span> Variant </span>
      <SelectNative items={variants} bind:value={variant} autocomplete="off"
      ></SelectNative>
    </label>
  </div>

  <Loading {loading} {variant}>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Banner
        heading="Workspace usage"
        subheading="You have used 62% of your monthly quota."
      ></Banner>
      <Alert tone="success">
        Your profile changes were saved successfully and published to the team.
      </Alert>
      <Alert tone="warning">
        Billing cycle ends in 3 days. Review your plan before renewal.
      </Alert>
    </div>
  </Loading>
</div>

Loading Variant

Workspace usage

You have used 62% of your monthly quota.

Your profile changes were saved successfully and published to the team.

Billing cycle ends in 3 days. Review your plan before renewal.

<script setup lang="ts">
// GENERATED from packages/demos/loading/banner.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Banner } from "@pindoba/vue-banner";
import { Alert } from "@pindoba/vue-alert";
import { Checkbox } from "@pindoba/vue-checkbox";
import { SelectNative } from "@pindoba/vue-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

const loading = ref(true);
const variant = ref("skeleton" as "skeleton" | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-demo-loading-banner-toggle"
        appearance="switch"
        :checked="loading"
        :onChange="
          (e: Event) => (loading = (e.target as HTMLInputElement).checked)
        "
      >
        Loading
      </Checkbox>
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative
          :items="variants"
          :value="variant"
          :onChange="
            (e: Event) =>
              (variant = (e.target as HTMLSelectElement).value as never)
          "
          autocomplete="off"
        ></SelectNative>
      </label>
    </div>

    <Loading :loading="loading" :variant="variant">
      <div :class="stack({ gap: 'md', direction: 'column' })">
        <Banner
          heading="Workspace usage"
          subheading="You have used 62% of your monthly quota."
        ></Banner>
        <Alert tone="success"
          >Your profile changes were saved successfully and published to the
          team.</Alert
        >
        <Alert tone="warning"
          >Billing cycle ends in 3 days. Review your plan before renewal.</Alert
        >
      </div>
    </Loading>
  </div>
</template>

LoadingVariant

Workspace usage

You have used 62% of your monthly quota.

Your profile changes were saved successfully and published to the team.

Billing cycle ends in 3 days. Review your plan before renewal.

// GENERATED from packages/demos/loading/banner.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Loading } from "@pindoba/solid-loading";
import { Banner } from "@pindoba/solid-banner";
import { Alert } from "@pindoba/solid-alert";
import { Checkbox } from "@pindoba/solid-checkbox";
import { SelectNative } from "@pindoba/solid-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
export default function BannerDemo() {
  const [loading, setLoading] = createSignal(true);
  const [variant, setVariant] = createSignal("skeleton" as "skeleton" | "busy");
  return (
    <div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}
      >
        <Checkbox
          id="solid-demo-loading-banner-toggle"
          appearance="switch"
          checked={loading()}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label class={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant()}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autocomplete="off"
          />
        </label>
      </div>

      <Loading loading={loading()} variant={variant()}>
        <div class={stack({ gap: "md", direction: "column" })}>
          <Banner
            heading="Workspace usage"
            subheading="You have used 62% of your monthly quota."
          />
          <Alert tone="success">
            Your profile changes were saved successfully and published to the
            team.
          </Alert>
          <Alert tone="warning">
            Billing cycle ends in 3 days. Review your plan before renewal.
          </Alert>
        </div>
      </Loading>
    </div>
  );
}

Form

A form while it saves — the case busy is for. The fields, select, checkbox and buttons stay readable and inert under the overlay; switch to skeleton for a form whose data is still loading.

PreviewCode

Loading Variant

---
// GENERATED from packages/demos/loading/form.demo.tsx — edit the source, not this file.
import Loading from "@pindoba/astro-loading";
import Input from "@pindoba/astro-input";
import SelectNative from "@pindoba/astro-select-native";
import Button from "@pindoba/astro-button";
import Checkbox from "@pindoba/astro-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
const countries = [
  { label: "Brazil", value: "br" },
  { label: "Portugal", value: "pt" },
  { label: "United States", value: "us" },
];

const loading = true;
const variant = "busy" as "skeleton" | "busy";
---

<div
  class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}
  data-ir-root="loading/form"
>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="astro-demo-loading-form-toggle"
      appearance="switch"
      checked
      data-ir="1"
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span>Variant</span>
      <SelectNative
        items={variants}
        value={"busy" as "skeleton" | "busy"}
        autocomplete="off"
        data-ir="2"
      />
    </label>
  </div>

  <Loading loading={loading} variant={variant} data-ir="3">
    <form class={stack({ gap: "md", direction: "column" })}>
      <Input placeholder="Full name" />
      <Input placeholder="Email" type="email" />
      <SelectNative items={countries} />
      <Checkbox id="astro-demo-loading-form-updates">
        Email me product updates
      </Checkbox>
      <div class={hstack({ gap: "sm" })}>
        <Button emphasis="primary" type="submit">
          Create account
        </Button>
        <Button emphasis="ghost" type="button">
          Cancel
        </Button>
      </div>
    </form>
  </Loading>
</div>

<script>
  import { hydrate } from "./_client/form.ts";

  document
    .querySelectorAll('[data-ir-root="loading/form"]')
    .forEach((root) => hydrate([root]));
</script>

LoadingVariant

// GENERATED from packages/demos/loading/form.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Loading } from "@pindoba/react-loading";
import { Input } from "@pindoba/react-input";
import { SelectNative } from "@pindoba/react-select-native";
import { Button } from "@pindoba/react-button";
import { Checkbox } from "@pindoba/react-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
const countries = [
  { label: "Brazil", value: "br" },
  { label: "Portugal", value: "pt" },
  { label: "United States", value: "us" },
];
export default function FormDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState("busy" as "skeleton" | "busy");
  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-demo-loading-form-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autoComplete="off"
          />
        </label>
      </div>

      <Loading loading={loading} variant={variant}>
        <form className={stack({ gap: "md", direction: "column" })}>
          <Input placeholder="Full name" />
          <Input placeholder="Email" type="email" />
          <SelectNative items={countries} />
          <Checkbox id="react-demo-loading-form-updates">
            Email me product updates
          </Checkbox>
          <div className={hstack({ gap: "sm" })}>
            <Button emphasis="primary" type="submit">
              Create account
            </Button>
            <Button emphasis="ghost" type="button">
              Cancel
            </Button>
          </div>
        </form>
      </Loading>
    </div>
  );
}

Loading Variant

<script lang="ts">
  // GENERATED from packages/demos/loading/form.demo.tsx — edit the source, not this file.
  import Loading from "@pindoba/svelte-loading";
  import Input from "@pindoba/svelte-input";
  import SelectNative from "@pindoba/svelte-select-native";
  import Button from "@pindoba/svelte-button";
  import Checkbox from "@pindoba/svelte-checkbox";
  import { stack, hstack } from "@pindoba/styled-system/patterns";

  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];
  const countries = [
    { label: "Brazil", value: "br" },
    { label: "Portugal", value: "pt" },
    { label: "United States", value: "us" },
  ];

  let loading = $state(true);
  let variant = $state("busy" as "skeleton" | "busy");
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-demo-loading-form-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span> Variant </span>
      <SelectNative items={variants} bind:value={variant} autocomplete="off"
      ></SelectNative>
    </label>
  </div>

  <Loading {loading} {variant}>
    <form class={stack({ gap: "md", direction: "column" })}>
      <Input placeholder="Full name"></Input>
      <Input placeholder="Email" type="email"></Input>
      <SelectNative items={countries}></SelectNative>
      <Checkbox id="svelte-demo-loading-form-updates">
        Email me product updates
      </Checkbox>
      <div class={hstack({ gap: "sm" })}>
        <Button emphasis="primary" type="submit">Create account</Button>
        <Button emphasis="ghost" type="button">Cancel</Button>
      </div>
    </form>
  </Loading>
</div>

Loading Variant

<script setup lang="ts">
// GENERATED from packages/demos/loading/form.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Input } from "@pindoba/vue-input";
import { SelectNative } from "@pindoba/vue-select-native";
import { Button } from "@pindoba/vue-button";
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
const countries = [
  { label: "Brazil", value: "br" },
  { label: "Portugal", value: "pt" },
  { label: "United States", value: "us" },
];

const loading = ref(true);
const variant = ref("busy" as "skeleton" | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-demo-loading-form-toggle"
        appearance="switch"
        :checked="loading"
        :onChange="
          (e: Event) => (loading = (e.target as HTMLInputElement).checked)
        "
      >
        Loading
      </Checkbox>
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative
          :items="variants"
          :value="variant"
          :onChange="
            (e: Event) =>
              (variant = (e.target as HTMLSelectElement).value as never)
          "
          autocomplete="off"
        ></SelectNative>
      </label>
    </div>

    <Loading :loading="loading" :variant="variant">
      <form :class="stack({ gap: 'md', direction: 'column' })">
        <Input placeholder="Full name"></Input>
        <Input placeholder="Email" type="email"></Input>
        <SelectNative :items="countries"></SelectNative>
        <Checkbox id="vue-demo-loading-form-updates"
          >Email me product updates</Checkbox
        >
        <div :class="hstack({ gap: 'sm' })">
          <Button emphasis="primary" type="submit">Create account</Button>
          <Button emphasis="ghost" type="button">Cancel</Button>
        </div>
      </form>
    </Loading>
  </div>
</template>

LoadingVariant

// GENERATED from packages/demos/loading/form.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Loading } from "@pindoba/solid-loading";
import { Input } from "@pindoba/solid-input";
import { SelectNative } from "@pindoba/solid-select-native";
import { Button } from "@pindoba/solid-button";
import { Checkbox } from "@pindoba/solid-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
const countries = [
  { label: "Brazil", value: "br" },
  { label: "Portugal", value: "pt" },
  { label: "United States", value: "us" },
];
export default function FormDemo() {
  const [loading, setLoading] = createSignal(true);
  const [variant, setVariant] = createSignal("busy" as "skeleton" | "busy");
  return (
    <div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}
      >
        <Checkbox
          id="solid-demo-loading-form-toggle"
          appearance="switch"
          checked={loading()}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label class={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant()}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autocomplete="off"
          />
        </label>
      </div>

      <Loading loading={loading()} variant={variant()}>
        <form class={stack({ gap: "md", direction: "column" })}>
          <Input placeholder="Full name" />
          <Input placeholder="Email" type="email" />
          <SelectNative items={countries} />
          <Checkbox id="solid-demo-loading-form-updates">
            Email me product updates
          </Checkbox>
          <div class={hstack({ gap: "sm" })}>
            <Button emphasis="primary" type="submit">
              Create account
            </Button>
            <Button emphasis="ghost" type="button">
              Cancel
            </Button>
          </div>
        </form>
      </Loading>
    </div>
  );
}

Feed

A feed layout with Stamp avatars, Badge tags and Button actions. Each post becomes its own composed skeleton.

PreviewCode

Loading Variant

Grace Hopper@amazing_grace· 2hMentorPioneer
Rear Admiral · US Navy
The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.
Alan Turing@enigma· 5hAuthor
Mathematician · Bletchley Park
Sometimes it is the people no one can imagine anything of who do the things no one can imagine.
Ada Lovelace@countess_of_code· 1dFounder
Analyst · Analytical Engine
The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.

---
// GENERATED from packages/demos/loading/feed.demo.tsx — edit the source, not this file.
import Loading from "@pindoba/astro-loading";
import Stamp from "@pindoba/astro-stamp";
import Badge from "@pindoba/astro-badge";
import Button from "@pindoba/astro-button";
import Checkbox from "@pindoba/astro-checkbox";
import SelectNative from "@pindoba/astro-select-native";
import { User, MessageCircle, Repeat2, Heart, Share } from "@lucide/astro";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const posts = [
  {
    name: "Grace Hopper",
    handle: "@amazing_grace",
    role: "Rear Admiral · US Navy",
    tags: ["Mentor", "Pioneer"],
    time: "2h",
    text: "The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.",
    likes: "1.2k",
    replies: "84",
    reposts: "312",
  },
  {
    name: "Alan Turing",
    handle: "@enigma",
    role: "Mathematician · Bletchley Park",
    tags: ["Author"],
    time: "5h",
    text: "Sometimes it is the people no one can imagine anything of who do the things no one can imagine.",
    likes: "892",
    replies: "47",
    reposts: "156",
  },
  {
    name: "Ada Lovelace",
    handle: "@countess_of_code",
    role: "Analyst · Analytical Engine",
    tags: ["Founder"],
    time: "1d",
    text: "The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.",
    likes: "2.4k",
    replies: "128",
    reposts: "498",
  },
];
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

const loading = true;
const variant = "skeleton" as "skeleton" | "busy";
---

<div
  class={stack({ gap: "md", direction: "column", maxWidth: "xl" })}
  data-ir-root="loading/feed"
>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="astro-demo-loading-feed-toggle"
      appearance="switch"
      checked
      data-ir="1"
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span>Variant</span>
      <SelectNative
        items={variants}
        value={"skeleton" as "skeleton" | "busy"}
        autocomplete="off"
        data-ir="2"
      />
    </label>
  </div>

  <Loading loading={loading} variant={variant} data-ir="3">
    <ul
      class={stack({
        gap: "lg",
        direction: "column",
        listStyle: "none",
        padding: "0",
        margin: "0",
      })}
    >
      <!--ir:4-->
      {posts.map((post) => (
        <li
          class={hstack({ gap: "md", alignItems: "flex-start" })}
          data-ir-key={post.handle}
        >
          <Stamp shape="circle">
            <User />
          </Stamp>
          <div class={stack({ gap: "sm", direction: "column", flex: "1" })}>
            <div
              class={hstack({
                gap: "sm",
                alignItems: "center",
                flexWrap: "wrap",
              })}
            >
              <strong>
                <!--ir:5-->
                {post.name}
                <!--/ir-->
              </strong>
              <span
                class={css({ color: "neutral.text.muted", fontSize: "sm" })}
              >
                <!--ir:6-->
                {post.handle}
                <!--/ir-->
              </span>
              <span
                class={css({ color: "neutral.text.muted", fontSize: "sm" })}
              >
                · <!--ir:7-->
                {post.time}
                <!--/ir-->
              </span>
              <!--ir:8-->
              {post.tags.map((tag) => (
                <Badge tone="primary" size="sm" data-ir-key={tag}>
                  <Fragment set:html="<!--ir:9-->" />
                  {tag}
                  <Fragment set:html="<!--/ir-->" />
                </Badge>
              ))}
              <!--/ir-->
            </div>
            <span class={css({ color: "neutral.text.muted", fontSize: "sm" })}>
              <!--ir:10-->
              {post.role}
              <!--/ir-->
            </span>
            <p class={css({ margin: "0", lineHeight: "1.5" })}>
              <span>
                <!--ir:11-->
                {post.text}
                <!--/ir-->
              </span>
            </p>
            <div
              class={hstack({
                gap: "lg",
                color: "neutral.text.muted",
                fontSize: "sm",
              })}
            >
              <Button emphasis="ghost" size="sm">
                <MessageCircle />
                <span>
                  <!--ir:12-->
                  {post.replies}
                  <!--/ir-->
                </span>
              </Button>
              <Button emphasis="ghost" size="sm">
                <Repeat2 />
                <span>
                  <!--ir:13-->
                  {post.reposts}
                  <!--/ir-->
                </span>
              </Button>
              <Button emphasis="ghost" size="sm">
                <Heart />
                <span>
                  <!--ir:14-->
                  {post.likes}
                  <!--/ir-->
                </span>
              </Button>
              <Button aria-label="Share" emphasis="ghost" size="sm">
                <Share />
              </Button>
            </div>
          </div>
        </li>
      ))}
      <!--/ir-->
    </ul>
  </Loading>
</div>

<script>
  import { hydrate } from "./_client/feed.ts";

  document
    .querySelectorAll('[data-ir-root="loading/feed"]')
    .forEach((root) => hydrate([root]));
</script>

LoadingVariant

Grace Hopper@amazing_grace· 2hMentorPioneer
Rear Admiral · US Navy
The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.
Alan Turing@enigma· 5hAuthor
Mathematician · Bletchley Park
Sometimes it is the people no one can imagine anything of who do the things no one can imagine.
Ada Lovelace@countess_of_code· 1dFounder
Analyst · Analytical Engine
The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.

// GENERATED from packages/demos/loading/feed.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Loading } from "@pindoba/react-loading";
import { Stamp } from "@pindoba/react-stamp";
import { Badge } from "@pindoba/react-badge";
import { Button } from "@pindoba/react-button";
import { Checkbox } from "@pindoba/react-checkbox";
import { SelectNative } from "@pindoba/react-select-native";
import { User } from "lucide-react";
import { MessageCircle } from "lucide-react";
import { Repeat2 } from "lucide-react";
import { Heart } from "lucide-react";
import { Share } from "lucide-react";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const posts = [
  {
    name: "Grace Hopper",
    handle: "@amazing_grace",
    role: "Rear Admiral · US Navy",
    tags: ["Mentor", "Pioneer"],
    time: "2h",
    text: "The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.",
    likes: "1.2k",
    replies: "84",
    reposts: "312",
  },
  {
    name: "Alan Turing",
    handle: "@enigma",
    role: "Mathematician · Bletchley Park",
    tags: ["Author"],
    time: "5h",
    text: "Sometimes it is the people no one can imagine anything of who do the things no one can imagine.",
    likes: "892",
    replies: "47",
    reposts: "156",
  },
  {
    name: "Ada Lovelace",
    handle: "@countess_of_code",
    role: "Analyst · Analytical Engine",
    tags: ["Founder"],
    time: "1d",
    text: "The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.",
    likes: "2.4k",
    replies: "128",
    reposts: "498",
  },
];
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
export default function FeedDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState("skeleton" as "skeleton" | "busy");
  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "xl" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-demo-loading-feed-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autoComplete="off"
          />
        </label>
      </div>

      <Loading loading={loading} variant={variant}>
        <ul
          className={stack({
            gap: "lg",
            direction: "column",
            listStyle: "none",
            padding: "0",
            margin: "0",
          })}
        >
          {posts.map((post) => (
            <li
              key={post.handle}
              className={hstack({ gap: "md", alignItems: "flex-start" })}
            >
              <Stamp shape="circle">
                <User />
              </Stamp>
              <div
                className={stack({ gap: "sm", direction: "column", flex: "1" })}
              >
                <div
                  className={hstack({
                    gap: "sm",
                    alignItems: "center",
                    flexWrap: "wrap",
                  })}
                >
                  <strong>{post.name}</strong>
                  <span
                    className={css({
                      color: "neutral.text.muted",
                      fontSize: "sm",
                    })}
                  >
                    {post.handle}
                  </span>
                  <span
                    className={css({
                      color: "neutral.text.muted",
                      fontSize: "sm",
                    })}
                  >
                    · {post.time}
                  </span>
                  {post.tags.map((tag) => (
                    <Badge key={tag} tone="primary" size="sm">
                      {tag}
                    </Badge>
                  ))}
                </div>
                <span
                  className={css({
                    color: "neutral.text.muted",
                    fontSize: "sm",
                  })}
                >
                  {post.role}
                </span>
                <p className={css({ margin: "0", lineHeight: "1.5" })}>
                  <span>{post.text}</span>
                </p>
                <div
                  className={hstack({
                    gap: "lg",
                    color: "neutral.text.muted",
                    fontSize: "sm",
                  })}
                >
                  <Button emphasis="ghost" size="sm">
                    <MessageCircle />
                    <span>{post.replies}</span>
                  </Button>
                  <Button emphasis="ghost" size="sm">
                    <Repeat2 />
                    <span>{post.reposts}</span>
                  </Button>
                  <Button emphasis="ghost" size="sm">
                    <Heart />
                    <span>{post.likes}</span>
                  </Button>
                  <Button aria-label="Share" emphasis="ghost" size="sm">
                    <Share />
                  </Button>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </Loading>
    </div>
  );
}

Loading Variant

Grace Hopper @amazing_grace · 2h Mentor Pioneer
Rear Admiral · US Navy
The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.
Alan Turing @enigma · 5h Author
Mathematician · Bletchley Park
Sometimes it is the people no one can imagine anything of who do the things no one can imagine.
Ada Lovelace @countess_of_code · 1d Founder
Analyst · Analytical Engine
The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.

<script lang="ts">
  // GENERATED from packages/demos/loading/feed.demo.tsx — edit the source, not this file.
  import Loading from "@pindoba/svelte-loading";
  import Stamp from "@pindoba/svelte-stamp";
  import Badge from "@pindoba/svelte-badge";
  import Button from "@pindoba/svelte-button";
  import Checkbox from "@pindoba/svelte-checkbox";
  import SelectNative from "@pindoba/svelte-select-native";
  import LucideUser from "@lucide/svelte/icons/user";
  import LucideMessageCircle from "@lucide/svelte/icons/message-circle";
  import LucideRepeat2 from "@lucide/svelte/icons/repeat-2";
  import LucideHeart from "@lucide/svelte/icons/heart";
  import LucideShare from "@lucide/svelte/icons/share";
  import { stack, hstack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const posts = [
    {
      name: "Grace Hopper",
      handle: "@amazing_grace",
      role: "Rear Admiral · US Navy",
      tags: ["Mentor", "Pioneer"],
      time: "2h",
      text: "The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.",
      likes: "1.2k",
      replies: "84",
      reposts: "312",
    },
    {
      name: "Alan Turing",
      handle: "@enigma",
      role: "Mathematician · Bletchley Park",
      tags: ["Author"],
      time: "5h",
      text: "Sometimes it is the people no one can imagine anything of who do the things no one can imagine.",
      likes: "892",
      replies: "47",
      reposts: "156",
    },
    {
      name: "Ada Lovelace",
      handle: "@countess_of_code",
      role: "Analyst · Analytical Engine",
      tags: ["Founder"],
      time: "1d",
      text: "The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.",
      likes: "2.4k",
      replies: "128",
      reposts: "498",
    },
  ];
  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];

  let loading = $state(true);
  let variant = $state("skeleton" as "skeleton" | "busy");
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "xl" })}>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-demo-loading-feed-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span> Variant </span>
      <SelectNative items={variants} bind:value={variant} autocomplete="off"
      ></SelectNative>
    </label>
  </div>

  <Loading {loading} {variant}>
    <ul
      class={stack({
        gap: "lg",
        direction: "column",
        listStyle: "none",
        padding: "0",
        margin: "0",
      })}
    >
      {#each posts as post (post.handle)}
        <li class={hstack({ gap: "md", alignItems: "flex-start" })}>
          <Stamp shape="circle">
            <LucideUser />
          </Stamp>
          <div class={stack({ gap: "sm", direction: "column", flex: "1" })}>
            <div
              class={hstack({
                gap: "sm",
                alignItems: "center",
                flexWrap: "wrap",
              })}
            >
              <strong>
                {post.name}
              </strong>
              <span
                class={css({ color: "neutral.text.muted", fontSize: "sm" })}
              >
                {post.handle}
              </span>
              <span
                class={css({ color: "neutral.text.muted", fontSize: "sm" })}
              >
                · {post.time}
              </span>
              {#each post.tags as tag (tag)}
                <Badge tone="primary" size="sm">
                  {tag}
                </Badge>
              {/each}
            </div>
            <span class={css({ color: "neutral.text.muted", fontSize: "sm" })}>
              {post.role}
            </span>
            <p class={css({ margin: "0", lineHeight: "1.5" })}>
              <span>
                {post.text}
              </span>
            </p>
            <div
              class={hstack({
                gap: "lg",
                color: "neutral.text.muted",
                fontSize: "sm",
              })}
            >
              <Button emphasis="ghost" size="sm">
                <LucideMessageCircle />
                <span>
                  {post.replies}
                </span>
              </Button>
              <Button emphasis="ghost" size="sm">
                <LucideRepeat2 />
                <span>
                  {post.reposts}
                </span>
              </Button>
              <Button emphasis="ghost" size="sm">
                <LucideHeart />
                <span>
                  {post.likes}
                </span>
              </Button>
              <Button aria-label="Share" emphasis="ghost" size="sm">
                <LucideShare />
              </Button>
            </div>
          </div>
        </li>
      {/each}
    </ul>
  </Loading>
</div>

Loading Variant

Grace Hopper@amazing_grace· 2hMentorPioneer
Rear Admiral · US Navy
The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.
Alan Turing@enigma· 5hAuthor
Mathematician · Bletchley Park
Sometimes it is the people no one can imagine anything of who do the things no one can imagine.
Ada Lovelace@countess_of_code· 1dFounder
Analyst · Analytical Engine
The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.

<script setup lang="ts">
// GENERATED from packages/demos/loading/feed.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Stamp } from "@pindoba/vue-stamp";
import { Badge } from "@pindoba/vue-badge";
import { Button } from "@pindoba/vue-button";
import { Checkbox } from "@pindoba/vue-checkbox";
import { SelectNative } from "@pindoba/vue-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const posts = [
  {
    name: "Grace Hopper",
    handle: "@amazing_grace",
    role: "Rear Admiral · US Navy",
    tags: ["Mentor", "Pioneer"],
    time: "2h",
    text: "The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.",
    likes: "1.2k",
    replies: "84",
    reposts: "312",
  },
  {
    name: "Alan Turing",
    handle: "@enigma",
    role: "Mathematician · Bletchley Park",
    tags: ["Author"],
    time: "5h",
    text: "Sometimes it is the people no one can imagine anything of who do the things no one can imagine.",
    likes: "892",
    replies: "47",
    reposts: "156",
  },
  {
    name: "Ada Lovelace",
    handle: "@countess_of_code",
    role: "Analyst · Analytical Engine",
    tags: ["Founder"],
    time: "1d",
    text: "The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.",
    likes: "2.4k",
    replies: "128",
    reposts: "498",
  },
];
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

const loading = ref(true);
const variant = ref("skeleton" as "skeleton" | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'xl' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-demo-loading-feed-toggle"
        appearance="switch"
        :checked="loading"
        :onChange="
          (e: Event) => (loading = (e.target as HTMLInputElement).checked)
        "
      >
        Loading
      </Checkbox>
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative
          :items="variants"
          :value="variant"
          :onChange="
            (e: Event) =>
              (variant = (e.target as HTMLSelectElement).value as never)
          "
          autocomplete="off"
        ></SelectNative>
      </label>
    </div>

    <Loading :loading="loading" :variant="variant">
      <ul
        :class="
          stack({
            gap: 'lg',
            direction: 'column',
            listStyle: 'none',
            padding: '0',
            margin: '0',
          })
        "
      >
        <li
          v-for="post in posts"
          :key="post.handle"
          :class="hstack({ gap: 'md', alignItems: 'flex-start' })"
        >
          <Stamp shape="circle">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-user"
              aria-hidden="true"
            >
              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
              <circle cx="12" cy="7" r="4" />
            </svg>
          </Stamp>
          <div :class="stack({ gap: 'sm', direction: 'column', flex: '1' })">
            <div
              :class="
                hstack({
                  gap: 'sm',
                  alignItems: 'center',
                  flexWrap: 'wrap',
                })
              "
            >
              <strong>{{ post.name }}</strong>
              <span
                :class="css({ color: 'neutral.text.muted', fontSize: 'sm' })"
                >{{ post.handle }}</span
              >
              <span
                :class="css({ color: 'neutral.text.muted', fontSize: 'sm' })"
                >· {{ post.time }}</span
              >
              <Badge
                v-for="tag in post.tags"
                :key="tag"
                tone="primary"
                size="sm"
                >{{ tag }}</Badge
              >
            </div>
            <span
              :class="css({ color: 'neutral.text.muted', fontSize: 'sm' })"
              >{{ post.role }}</span
            >
            <p :class="css({ margin: '0', lineHeight: '1.5' })">
              <span>{{ post.text }}</span>
            </p>
            <div
              :class="
                hstack({
                  gap: 'lg',
                  color: 'neutral.text.muted',
                  fontSize: 'sm',
                })
              "
            >
              <Button emphasis="ghost" size="sm">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-message-circle"
                  aria-hidden="true"
                >
                  <path
                    d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
                  />
                </svg>
                <span>{{ post.replies }}</span>
              </Button>
              <Button emphasis="ghost" size="sm">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-repeat-2"
                  aria-hidden="true"
                >
                  <path d="m2 9 3-3 3 3" />
                  <path d="M13 18H7a2 2 0 0 1-2-2V6" />
                  <path d="m22 15-3 3-3-3" />
                  <path d="M11 6h6a2 2 0 0 1 2 2v10" />
                </svg>
                <span>{{ post.reposts }}</span>
              </Button>
              <Button emphasis="ghost" size="sm">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-heart"
                  aria-hidden="true"
                >
                  <path
                    d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
                  />
                </svg>
                <span>{{ post.likes }}</span>
              </Button>
              <Button aria-label="Share" emphasis="ghost" size="sm">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-share"
                  aria-hidden="true"
                >
                  <path d="M12 2v13" />
                  <path d="m16 6-4-4-4 4" />
                  <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                </svg>
              </Button>
            </div>
          </div>
        </li>
      </ul>
    </Loading>
  </div>
</template>

LoadingVariant

Grace Hopper@amazing_grace· 2hMentorPioneer
Rear Admiral · US Navy
The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.
Alan Turing@enigma· 5hAuthor
Mathematician · Bletchley Park
Sometimes it is the people no one can imagine anything of who do the things no one can imagine.
Ada Lovelace@countess_of_code· 1dFounder
Analyst · Analytical Engine
The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.

// GENERATED from packages/demos/loading/feed.demo.tsx — edit the source, not this file.
import { createSignal, For } from "solid-js";
import { Loading } from "@pindoba/solid-loading";
import { Stamp } from "@pindoba/solid-stamp";
import { Badge } from "@pindoba/solid-badge";
import { Button } from "@pindoba/solid-button";
import { Checkbox } from "@pindoba/solid-checkbox";
import { SelectNative } from "@pindoba/solid-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const posts = [
  {
    name: "Grace Hopper",
    handle: "@amazing_grace",
    role: "Rear Admiral · US Navy",
    tags: ["Mentor", "Pioneer"],
    time: "2h",
    text: "The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.",
    likes: "1.2k",
    replies: "84",
    reposts: "312",
  },
  {
    name: "Alan Turing",
    handle: "@enigma",
    role: "Mathematician · Bletchley Park",
    tags: ["Author"],
    time: "5h",
    text: "Sometimes it is the people no one can imagine anything of who do the things no one can imagine.",
    likes: "892",
    replies: "47",
    reposts: "156",
  },
  {
    name: "Ada Lovelace",
    handle: "@countess_of_code",
    role: "Analyst · Analytical Engine",
    tags: ["Founder"],
    time: "1d",
    text: "The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.",
    likes: "2.4k",
    replies: "128",
    reposts: "498",
  },
];
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
export default function FeedDemo() {
  const [loading, setLoading] = createSignal(true);
  const [variant, setVariant] = createSignal("skeleton" as "skeleton" | "busy");
  return (
    <div class={stack({ gap: "md", direction: "column", maxWidth: "xl" })}>
      <div
        class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}
      >
        <Checkbox
          id="solid-demo-loading-feed-toggle"
          appearance="switch"
          checked={loading()}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label class={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant()}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autocomplete="off"
          />
        </label>
      </div>

      <Loading loading={loading()} variant={variant()}>
        <ul
          class={stack({
            gap: "lg",
            direction: "column",
            listStyle: "none",
            padding: "0",
            margin: "0",
          })}
        >
          <For each={posts}>
            {(post) => (
              <li class={hstack({ gap: "md", alignItems: "flex-start" })}>
                <Stamp shape="circle">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="lucide lucide-user"
                    aria-hidden="true"
                  >
                    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                    <circle cx="12" cy="7" r="4" />
                  </svg>
                </Stamp>
                <div
                  class={stack({ gap: "sm", direction: "column", flex: "1" })}
                >
                  <div
                    class={hstack({
                      gap: "sm",
                      alignItems: "center",
                      flexWrap: "wrap",
                    })}
                  >
                    <strong>{post.name}</strong>
                    <span
                      class={css({
                        color: "neutral.text.muted",
                        fontSize: "sm",
                      })}
                    >
                      {post.handle}
                    </span>
                    <span
                      class={css({
                        color: "neutral.text.muted",
                        fontSize: "sm",
                      })}
                    >
                      · {post.time}
                    </span>
                    <For each={post.tags}>
                      {(tag) => (
                        <Badge tone="primary" size="sm">
                          {tag}
                        </Badge>
                      )}
                    </For>
                  </div>
                  <span
                    class={css({ color: "neutral.text.muted", fontSize: "sm" })}
                  >
                    {post.role}
                  </span>
                  <p class={css({ margin: "0", lineHeight: "1.5" })}>
                    <span>{post.text}</span>
                  </p>
                  <div
                    class={hstack({
                      gap: "lg",
                      color: "neutral.text.muted",
                      fontSize: "sm",
                    })}
                  >
                    <Button emphasis="ghost" size="sm">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="lucide lucide-message-circle"
                        aria-hidden="true"
                      >
                        <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
                      </svg>
                      <span>{post.replies}</span>
                    </Button>
                    <Button emphasis="ghost" size="sm">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="lucide lucide-repeat-2"
                        aria-hidden="true"
                      >
                        <path d="m2 9 3-3 3 3" />
                        <path d="M13 18H7a2 2 0 0 1-2-2V6" />
                        <path d="m22 15-3 3-3-3" />
                        <path d="M11 6h6a2 2 0 0 1 2 2v10" />
                      </svg>
                      <span>{post.reposts}</span>
                    </Button>
                    <Button emphasis="ghost" size="sm">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="lucide lucide-heart"
                        aria-hidden="true"
                      >
                        <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />
                      </svg>
                      <span>{post.likes}</span>
                    </Button>
                    <Button aria-label="Share" emphasis="ghost" size="sm">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="lucide lucide-share"
                        aria-hidden="true"
                      >
                        <path d="M12 2v13" />
                        <path d="m16 6-4-4-4 4" />
                        <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                      </svg>
                    </Button>
                  </div>
                </div>
              </li>
            )}
          </For>
        </ul>
      </Loading>
    </div>
  );
}

Keep parts live

Mark a subtree with data-loading-as="none" to keep it out of the treatment — here the Progress bar and the Cancel Button that drive the sync stay live and clickable while the repository list loads.

PreviewCode

Loading Variant

Syncing repositories

62%

web-appDashboard · 1,284 files
Synced
mobileMobile apps · 932 files
Syncing
infrastructureTerraform · 210 files
Queued

---
// GENERATED from packages/demos/loading/live.demo.tsx — edit the source, not this file.
import Loading from "@pindoba/astro-loading";
import Stamp from "@pindoba/astro-stamp";
import Badge from "@pindoba/astro-badge";
import Button from "@pindoba/astro-button";
import Progress from "@pindoba/astro-progress";
import Checkbox from "@pindoba/astro-checkbox";
import SelectNative from "@pindoba/astro-select-native";
import { FolderGit2 } from "@lucide/astro";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const repos = [
  {
    name: "web-app",
    detail: "Dashboard · 1,284 files",
    status: "Synced",
    tone: "success",
  },
  {
    name: "mobile",
    detail: "Mobile apps · 932 files",
    status: "Syncing",
    tone: "primary",
  },
  {
    name: "infrastructure",
    detail: "Terraform · 210 files",
    status: "Queued",
    tone: "neutral",
  },
] as const;
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

const loading = true;
const variant = "busy" as "skeleton" | "busy";
---

<div
  class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}
  data-ir-root="loading/live"
>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="astro-demo-loading-live-toggle"
      appearance="switch"
      checked
      data-ir="1"
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span>Variant</span>
      <SelectNative
        items={variants}
        value={"busy" as "skeleton" | "busy"}
        autocomplete="off"
        data-ir="2"
      />
    </label>
  </div>

  <Loading loading={loading} variant={variant} data-ir="3">
    <section class={stack({ gap: "md", direction: "column" })}>
      <div
        class={hstack({
          gap: "md",
          alignItems: "center",
          justifyContent: "space-between",
        })}
      >
        <h3 class={css({ fontSize: "lg", fontWeight: "bold" })}>
          Syncing repositories
        </h3>
        <Button size="sm" emphasis="ghost" data-loading-as="none">
          Cancel
        </Button>
      </div>
      <Progress
        value={62}
        showLabel
        label="Sync progress"
        data-loading-as="none"
      />
      <ul
        class={stack({
          gap: "md",
          direction: "column",
          listStyle: "none",
          padding: "0",
          margin: "0",
        })}
      >
        <!--ir:4-->
        {repos.map((repo) => (
          <li
            class={hstack({ gap: "md", alignItems: "center" })}
            data-ir-key={repo.name}
          >
            <Stamp shape="circle">
              <FolderGit2 />
            </Stamp>
            <div class={stack({ gap: "2xs", direction: "column", flex: "1" })}>
              <strong>
                <!--ir:5-->
                {repo.name}
                <!--/ir-->
              </strong>
              <span
                class={css({ color: "neutral.text.muted", fontSize: "sm" })}
              >
                <!--ir:6-->
                {repo.detail}
                <!--/ir-->
              </span>
            </div>
            <Badge tone={repo.tone} size="sm" data-ir="7">
              <Fragment set:html="<!--ir:8-->" />
              {repo.status}
              <Fragment set:html="<!--/ir-->" />
            </Badge>
          </li>
        ))}
        <!--/ir-->
      </ul>
    </section>
  </Loading>
</div>

<script>
  import { hydrate } from "./_client/live.ts";

  document
    .querySelectorAll('[data-ir-root="loading/live"]')
    .forEach((root) => hydrate([root]));
</script>

LoadingVariant

Syncing repositories

62%

web-appDashboard · 1,284 files
Synced
mobileMobile apps · 932 files
Syncing
infrastructureTerraform · 210 files
Queued

// GENERATED from packages/demos/loading/live.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Loading } from "@pindoba/react-loading";
import { Stamp } from "@pindoba/react-stamp";
import { Badge } from "@pindoba/react-badge";
import { Button } from "@pindoba/react-button";
import { Progress } from "@pindoba/react-progress";
import { Checkbox } from "@pindoba/react-checkbox";
import { SelectNative } from "@pindoba/react-select-native";
import { FolderGit2 } from "lucide-react";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const repos = [
  {
    name: "web-app",
    detail: "Dashboard · 1,284 files",
    status: "Synced",
    tone: "success",
  },
  {
    name: "mobile",
    detail: "Mobile apps · 932 files",
    status: "Syncing",
    tone: "primary",
  },
  {
    name: "infrastructure",
    detail: "Terraform · 210 files",
    status: "Queued",
    tone: "neutral",
  },
] as const;
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
export default function LiveDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState("busy" as "skeleton" | "busy");
  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-demo-loading-live-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autoComplete="off"
          />
        </label>
      </div>

      <Loading loading={loading} variant={variant}>
        <section className={stack({ gap: "md", direction: "column" })}>
          <div
            className={hstack({
              gap: "md",
              alignItems: "center",
              justifyContent: "space-between",
            })}
          >
            <h3 className={css({ fontSize: "lg", fontWeight: "bold" })}>
              Syncing repositories
            </h3>
            <Button size="sm" emphasis="ghost" data-loading-as="none">
              Cancel
            </Button>
          </div>
          <Progress
            value={62}
            showLabel
            label="Sync progress"
            data-loading-as="none"
          />
          <ul
            className={stack({
              gap: "md",
              direction: "column",
              listStyle: "none",
              padding: "0",
              margin: "0",
            })}
          >
            {repos.map((repo) => (
              <li
                key={repo.name}
                className={hstack({ gap: "md", alignItems: "center" })}
              >
                <Stamp shape="circle">
                  <FolderGit2 />
                </Stamp>
                <div
                  className={stack({
                    gap: "2xs",
                    direction: "column",
                    flex: "1",
                  })}
                >
                  <strong>{repo.name}</strong>
                  <span
                    className={css({
                      color: "neutral.text.muted",
                      fontSize: "sm",
                    })}
                  >
                    {repo.detail}
                  </span>
                </div>
                <Badge tone={repo.tone} size="sm">
                  {repo.status}
                </Badge>
              </li>
            ))}
          </ul>
        </section>
      </Loading>
    </div>
  );
}

Loading Variant

Syncing repositories

62%

web-app Dashboard · 1,284 files
Synced
mobile Mobile apps · 932 files
Syncing
infrastructure Terraform · 210 files
Queued

<script lang="ts">
  // GENERATED from packages/demos/loading/live.demo.tsx — edit the source, not this file.
  import Loading from "@pindoba/svelte-loading";
  import Stamp from "@pindoba/svelte-stamp";
  import Badge from "@pindoba/svelte-badge";
  import Button from "@pindoba/svelte-button";
  import Progress from "@pindoba/svelte-progress";
  import Checkbox from "@pindoba/svelte-checkbox";
  import SelectNative from "@pindoba/svelte-select-native";
  import LucideFolderGit2 from "@lucide/svelte/icons/folder-git-2";
  import { stack, hstack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const repos = [
    {
      name: "web-app",
      detail: "Dashboard · 1,284 files",
      status: "Synced",
      tone: "success",
    },
    {
      name: "mobile",
      detail: "Mobile apps · 932 files",
      status: "Syncing",
      tone: "primary",
    },
    {
      name: "infrastructure",
      detail: "Terraform · 210 files",
      status: "Queued",
      tone: "neutral",
    },
  ] as const;
  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];

  let loading = $state(true);
  let variant = $state("busy" as "skeleton" | "busy");
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <div class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-demo-loading-live-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "center" })}>
      <span> Variant </span>
      <SelectNative items={variants} bind:value={variant} autocomplete="off"
      ></SelectNative>
    </label>
  </div>

  <Loading {loading} {variant}>
    <section class={stack({ gap: "md", direction: "column" })}>
      <div
        class={hstack({
          gap: "md",
          alignItems: "center",
          justifyContent: "space-between",
        })}
      >
        <h3 class={css({ fontSize: "lg", fontWeight: "bold" })}>
          Syncing repositories
        </h3>
        <Button size="sm" emphasis="ghost" data-loading-as="none">
          Cancel
        </Button>
      </div>
      <Progress
        value={62}
        showLabel
        label="Sync progress"
        data-loading-as="none"
      ></Progress>
      <ul
        class={stack({
          gap: "md",
          direction: "column",
          listStyle: "none",
          padding: "0",
          margin: "0",
        })}
      >
        {#each repos as repo (repo.name)}
          <li class={hstack({ gap: "md", alignItems: "center" })}>
            <Stamp shape="circle">
              <LucideFolderGit2 />
            </Stamp>
            <div class={stack({ gap: "2xs", direction: "column", flex: "1" })}>
              <strong>
                {repo.name}
              </strong>
              <span
                class={css({ color: "neutral.text.muted", fontSize: "sm" })}
              >
                {repo.detail}
              </span>
            </div>
            <Badge tone={repo.tone} size="sm">
              {repo.status}
            </Badge>
          </li>
        {/each}
      </ul>
    </section>
  </Loading>
</div>

Loading Variant

Syncing repositories

62%

web-appDashboard · 1,284 files
Synced
mobileMobile apps · 932 files
Syncing
infrastructureTerraform · 210 files
Queued

<script setup lang="ts">
// GENERATED from packages/demos/loading/live.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Stamp } from "@pindoba/vue-stamp";
import { Badge } from "@pindoba/vue-badge";
import { Button } from "@pindoba/vue-button";
import { Progress } from "@pindoba/vue-progress";
import { Checkbox } from "@pindoba/vue-checkbox";
import { SelectNative } from "@pindoba/vue-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const repos = [
  {
    name: "web-app",
    detail: "Dashboard · 1,284 files",
    status: "Synced",
    tone: "success",
  },
  {
    name: "mobile",
    detail: "Mobile apps · 932 files",
    status: "Syncing",
    tone: "primary",
  },
  {
    name: "infrastructure",
    detail: "Terraform · 210 files",
    status: "Queued",
    tone: "neutral",
  },
] as const;
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

const loading = ref(true);
const variant = ref("busy" as "skeleton" | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-demo-loading-live-toggle"
        appearance="switch"
        :checked="loading"
        :onChange="
          (e: Event) => (loading = (e.target as HTMLInputElement).checked)
        "
      >
        Loading
      </Checkbox>
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative
          :items="variants"
          :value="variant"
          :onChange="
            (e: Event) =>
              (variant = (e.target as HTMLSelectElement).value as never)
          "
          autocomplete="off"
        ></SelectNative>
      </label>
    </div>

    <Loading :loading="loading" :variant="variant">
      <section :class="stack({ gap: 'md', direction: 'column' })">
        <div
          :class="
            hstack({
              gap: 'md',
              alignItems: 'center',
              justifyContent: 'space-between',
            })
          "
        >
          <h3 :class="css({ fontSize: 'lg', fontWeight: 'bold' })">
            Syncing repositories
          </h3>
          <Button size="sm" emphasis="ghost" data-loading-as="none"
            >Cancel</Button
          >
        </div>
        <Progress
          :value="62"
          :showLabel="true"
          label="Sync progress"
          data-loading-as="none"
        ></Progress>
        <ul
          :class="
            stack({
              gap: 'md',
              direction: 'column',
              listStyle: 'none',
              padding: '0',
              margin: '0',
            })
          "
        >
          <li
            v-for="repo in repos"
            :key="repo.name"
            :class="hstack({ gap: 'md', alignItems: 'center' })"
          >
            <Stamp shape="circle">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-folder-git-2"
                aria-hidden="true"
              >
                <path d="M18 19a5 5 0 0 1-5-5v8" />
                <path
                  d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5"
                />
                <circle cx="13" cy="12" r="2" />
                <circle cx="20" cy="19" r="2" />
              </svg>
            </Stamp>
            <div :class="stack({ gap: '2xs', direction: 'column', flex: '1' })">
              <strong>{{ repo.name }}</strong>
              <span
                :class="css({ color: 'neutral.text.muted', fontSize: 'sm' })"
                >{{ repo.detail }}</span
              >
            </div>
            <Badge :tone="repo.tone" size="sm">{{ repo.status }}</Badge>
          </li>
        </ul>
      </section>
    </Loading>
  </div>
</template>

LoadingVariant

Syncing repositories

62%

web-appDashboard · 1,284 files
Synced
mobileMobile apps · 932 files
Syncing
infrastructureTerraform · 210 files
Queued

// GENERATED from packages/demos/loading/live.demo.tsx — edit the source, not this file.
import { createSignal, For } from "solid-js";
import { Loading } from "@pindoba/solid-loading";
import { Stamp } from "@pindoba/solid-stamp";
import { Badge } from "@pindoba/solid-badge";
import { Button } from "@pindoba/solid-button";
import { Progress } from "@pindoba/solid-progress";
import { Checkbox } from "@pindoba/solid-checkbox";
import { SelectNative } from "@pindoba/solid-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const repos = [
  {
    name: "web-app",
    detail: "Dashboard · 1,284 files",
    status: "Synced",
    tone: "success",
  },
  {
    name: "mobile",
    detail: "Mobile apps · 932 files",
    status: "Syncing",
    tone: "primary",
  },
  {
    name: "infrastructure",
    detail: "Terraform · 210 files",
    status: "Queued",
    tone: "neutral",
  },
] as const;
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
export default function LiveDemo() {
  const [loading, setLoading] = createSignal(true);
  const [variant, setVariant] = createSignal("busy" as "skeleton" | "busy");
  return (
    <div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        class={hstack({ gap: "md", alignItems: "center", flexWrap: "wrap" })}
      >
        <Checkbox
          id="solid-demo-loading-live-toggle"
          appearance="switch"
          checked={loading()}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label class={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant()}
            onChange={(e) => setVariant(e.currentTarget.value as never)}
            autocomplete="off"
          />
        </label>
      </div>

      <Loading loading={loading()} variant={variant()}>
        <section class={stack({ gap: "md", direction: "column" })}>
          <div
            class={hstack({
              gap: "md",
              alignItems: "center",
              justifyContent: "space-between",
            })}
          >
            <h3 class={css({ fontSize: "lg", fontWeight: "bold" })}>
              Syncing repositories
            </h3>
            <Button size="sm" emphasis="ghost" data-loading-as="none">
              Cancel
            </Button>
          </div>
          <Progress
            value={62}
            showLabel
            label="Sync progress"
            data-loading-as="none"
          />
          <ul
            class={stack({
              gap: "md",
              direction: "column",
              listStyle: "none",
              padding: "0",
              margin: "0",
            })}
          >
            <For each={repos}>
              {(repo) => (
                <li class={hstack({ gap: "md", alignItems: "center" })}>
                  <Stamp shape="circle">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-folder-git-2"
                      aria-hidden="true"
                    >
                      <path d="M18 19a5 5 0 0 1-5-5v8" />
                      <path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5" />
                      <circle cx="13" cy="12" r="2" />
                      <circle cx="20" cy="19" r="2" />
                    </svg>
                  </Stamp>
                  <div
                    class={stack({
                      gap: "2xs",
                      direction: "column",
                      flex: "1",
                    })}
                  >
                    <strong>{repo.name}</strong>
                    <span
                      class={css({
                        color: "neutral.text.muted",
                        fontSize: "sm",
                      })}
                    >
                      {repo.detail}
                    </span>
                  </div>
                  <Badge tone={repo.tone} size="sm">
                    {repo.status}
                  </Badge>
                </li>
              )}
            </For>
          </ul>
        </section>
      </Loading>
    </div>
  );
}

Indicators

Busy content doesn’t move, so the indicator alone says the region is working — one small moving thing in a calm region. Pick it with indicator:

`indicator`	For	Looks like
`corner` / `true`	small blocks, rows	a spinner stamp on the top-end corner
`bar`	lists, tables, feeds	a thin progress line along the top edge
`overlay`	cards, panels, whole forms	a light tint with a card: spinner, the `label` as a message, the percentage — the default for `busy`
`inline`	buttons and single controls	the label hides, a spinner is drawn inside the control in its own colour
`false`	—	none (a busy region without one looks idle)

Every indicator stays mounted, hidden while idle, so toggling loading never remounts the children: a focused field or in-flight child state survives.

Buttons

The main place a loading state shows up. Wrap the button with indicator="inline": it keeps its exact width and its fill — it’s working, not disabled — and its label is swapped for a spinner drawn inside it, so the spinner takes the button’s own text colour (white on primary, ink on ghost). The label still names the button for assistive technology, and the label prop is announced while it’s busy.

<Loading loading={saving} variant="busy" indicator="inline" label="Saving">
  <Button emphasis="primary" onclick={save}>Save changes</Button>
</Loading>

With progress (0–100), the spinner becomes a ring that fills to the value with the percentage beside it.

PreviewCode

Each button keeps its width and colour.

Known progress: the ring fills and the percentage replaces the label.

---
// GENERATED from packages/demos/loading/button.demo.tsx — edit the source, not this file.
import Loading from "@pindoba/astro-loading";
import Button from "@pindoba/astro-button";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const caption = css({ color: "neutral.text.muted", fontSize: "sm" });

const saving = false;
const publishing = false;
const retrying = false;
const quick = false;
const uploading = false;
const uploaded = undefined as number | undefined;
---

<div
  class={stack({ gap: "lg", direction: "column" })}
  data-ir-root="loading/button"
>
  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={caption}>Each button keeps its width and colour.</span>
    <div class={hstack({ gap: "sm", flexWrap: "wrap" })}>
      <Loading
        loading={saving}
        variant="busy"
        indicator="inline"
        label="Saving"
        data-ir="1"
      >
        <Button emphasis="primary" data-ir="2">
          Save changes
        </Button>
      </Loading>
      <Loading
        loading={publishing}
        variant="busy"
        indicator="inline"
        label="Publishing"
        data-ir="3"
      >
        <Button emphasis="secondary" data-ir="4">
          Publish
        </Button>
      </Loading>
      <Loading
        loading={retrying}
        variant="busy"
        indicator="inline"
        label="Retrying"
        data-ir="5"
      >
        <Button emphasis="ghost" data-ir="6">
          Retry
        </Button>
      </Loading>
      <Loading
        loading={quick}
        variant="busy"
        indicator="inline"
        label="Copying"
        data-ir="7"
      >
        <Button emphasis="secondary" data-ir="8">
          Copy link (fast)
        </Button>
      </Loading>
    </div>
  </div>

  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={caption}>
      Known progress: the ring fills and the percentage replaces the label.
    </span>
    <div class={hstack({ gap: "sm", flexWrap: "wrap", alignItems: "center" })}>
      <Loading
        loading={uploading}
        variant="busy"
        indicator="inline"
        progress={uploaded}
        label="Uploading"
        data-ir="9"
      >
        <Button emphasis="primary" size="lg" data-ir="10">
          Upload report
        </Button>
      </Loading>
      <Loading
        loading={uploading}
        variant="busy"
        indicator="inline"
        progress={uploaded}
        label="Uploading"
        data-ir="11"
      >
        <Button emphasis="secondary" size="sm">
          Attach
        </Button>
      </Loading>
    </div>
  </div>
</div>

<script>
  import { hydrate } from "./_client/button.ts";

  document
    .querySelectorAll('[data-ir-root="loading/button"]')
    .forEach((root) => hydrate([root]));
</script>

Each button keeps its width and colour.

Known progress: the ring fills and the percentage replaces the label.

// GENERATED from packages/demos/loading/button.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Loading } from "@pindoba/react-loading";
import { Button } from "@pindoba/react-button";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const caption = css({ color: "neutral.text.muted", fontSize: "sm" });
export default function ButtonDemo() {
  const [saving, setSaving] = useState(false);
  const [publishing, setPublishing] = useState(false);
  const [retrying, setRetrying] = useState(false);
  const [quick, setQuick] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [uploaded, setUploaded] = useState(undefined as number | undefined);

  function save() {
    setSaving(true);
    setTimeout(() => {
      setSaving(false);
    }, 2000);
  }

  function publish() {
    setPublishing(true);
    setTimeout(() => {
      setPublishing(false);
    }, 2000);
  }

  function retry() {
    setRetrying(true);
    setTimeout(() => {
      setRetrying(false);
    }, 2000);
  }

  function copy() {
    setQuick(true);
    setTimeout(() => {
      setQuick(false);
    }, 150);
  }

  function uploadStep(value: number) {
    setTimeout(
      () => {
        if (value < 100) {
          uploadStep(Math.min(100, value + 5));
          return;
        }
        setUploading(false);
        setUploaded(undefined);
      },
      value < 100 ? 150 : 400,
    );
    setUploaded(value);
  }

  function upload() {
    uploadStep(0);
    setUploading(true);
  }

  return (
    <div className={stack({ gap: "lg", direction: "column" })}>
      <div className={stack({ gap: "xs", direction: "column" })}>
        <span className={caption}>Each button keeps its width and colour.</span>
        <div className={hstack({ gap: "sm", flexWrap: "wrap" })}>
          <Loading
            loading={saving}
            variant="busy"
            indicator="inline"
            label="Saving"
          >
            <Button emphasis="primary" onClick={save}>
              Save changes
            </Button>
          </Loading>
          <Loading
            loading={publishing}
            variant="busy"
            indicator="inline"
            label="Publishing"
          >
            <Button emphasis="secondary" onClick={publish}>
              Publish
            </Button>
          </Loading>
          <Loading
            loading={retrying}
            variant="busy"
            indicator="inline"
            label="Retrying"
          >
            <Button emphasis="ghost" onClick={retry}>
              Retry
            </Button>
          </Loading>
          <Loading
            loading={quick}
            variant="busy"
            indicator="inline"
            label="Copying"
          >
            <Button emphasis="secondary" onClick={copy}>
              Copy link (fast)
            </Button>
          </Loading>
        </div>
      </div>

      <div className={stack({ gap: "xs", direction: "column" })}>
        <span className={caption}>
          Known progress: the ring fills and the percentage replaces the label.
        </span>
        <div
          className={hstack({
            gap: "sm",
            flexWrap: "wrap",
            alignItems: "center",
          })}
        >
          <Loading
            loading={uploading}
            variant="busy"
            indicator="inline"
            progress={uploaded}
            label="Uploading"
          >
            <Button emphasis="primary" size="lg" onClick={upload}>
              Upload report
            </Button>
          </Loading>
          <Loading
            loading={uploading}
            variant="busy"
            indicator="inline"
            progress={uploaded}
            label="Uploading"
          >
            <Button emphasis="secondary" size="sm">
              Attach
            </Button>
          </Loading>
        </div>
      </div>
    </div>
  );
}

Each button keeps its width and colour.

Known progress: the ring fills and the percentage replaces the label.

<script lang="ts">
  // GENERATED from packages/demos/loading/button.demo.tsx — edit the source, not this file.
  import Loading from "@pindoba/svelte-loading";
  import Button from "@pindoba/svelte-button";
  import { stack, hstack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const caption = css({ color: "neutral.text.muted", fontSize: "sm" });

  let saving = $state(false);
  let publishing = $state(false);
  let retrying = $state(false);
  let quick = $state(false);
  let uploading = $state(false);
  let uploaded = $state(undefined as number | undefined);

  function save() {
    saving = true;
    setTimeout(() => {
      saving = false;
    }, 2000);
  }
  function publish() {
    publishing = true;
    setTimeout(() => {
      publishing = false;
    }, 2000);
  }
  function retry() {
    retrying = true;
    setTimeout(() => {
      retrying = false;
    }, 2000);
  }
  function copy() {
    quick = true;
    setTimeout(() => {
      quick = false;
    }, 150);
  }
  function uploadStep(value: number) {
    setTimeout(
      () => {
        if (value < 100) {
          uploadStep(Math.min(100, value + 5));
          return;
        }
        uploading = false;
        uploaded = undefined;
      },
      value < 100 ? 150 : 400,
    );
    uploaded = value;
  }
  function upload() {
    uploadStep(0);
    uploading = true;
  }
</script>

<div class={stack({ gap: "lg", direction: "column" })}>
  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={caption}> Each button keeps its width and colour. </span>
    <div class={hstack({ gap: "sm", flexWrap: "wrap" })}>
      <Loading
        loading={saving}
        variant="busy"
        indicator="inline"
        label="Saving"
      >
        <Button emphasis="primary" onclick={save}>Save changes</Button>
      </Loading>
      <Loading
        loading={publishing}
        variant="busy"
        indicator="inline"
        label="Publishing"
      >
        <Button emphasis="secondary" onclick={publish}>Publish</Button>
      </Loading>
      <Loading
        loading={retrying}
        variant="busy"
        indicator="inline"
        label="Retrying"
      >
        <Button emphasis="ghost" onclick={retry}>Retry</Button>
      </Loading>
      <Loading
        loading={quick}
        variant="busy"
        indicator="inline"
        label="Copying"
      >
        <Button emphasis="secondary" onclick={copy}>Copy link (fast)</Button>
      </Loading>
    </div>
  </div>

  <div class={stack({ gap: "xs", direction: "column" })}>
    <span class={caption}>
      Known progress: the ring fills and the percentage replaces the label.
    </span>
    <div class={hstack({ gap: "sm", flexWrap: "wrap", alignItems: "center" })}>
      <Loading
        loading={uploading}
        variant="busy"
        indicator="inline"
        progress={uploaded}
        label="Uploading"
      >
        <Button emphasis="primary" size="lg" onclick={upload}>
          Upload report
        </Button>
      </Loading>
      <Loading
        loading={uploading}
        variant="busy"
        indicator="inline"
        progress={uploaded}
        label="Uploading"
      >
        <Button emphasis="secondary" size="sm">Attach</Button>
      </Loading>
    </div>
  </div>
</div>

Each button keeps its width and colour.

Known progress: the ring fills and the percentage replaces the label.

<script setup lang="ts">
// GENERATED from packages/demos/loading/button.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Button } from "@pindoba/vue-button";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const caption = css({ color: "neutral.text.muted", fontSize: "sm" });

const saving = ref(false);
const publishing = ref(false);
const retrying = ref(false);
const quick = ref(false);
const uploading = ref(false);
const uploaded = ref(undefined as number | undefined);

function save() {
  saving.value = true;
  setTimeout(() => {
    saving.value = false;
  }, 2000);
}
function publish() {
  publishing.value = true;
  setTimeout(() => {
    publishing.value = false;
  }, 2000);
}
function retry() {
  retrying.value = true;
  setTimeout(() => {
    retrying.value = false;
  }, 2000);
}
function copy() {
  quick.value = true;
  setTimeout(() => {
    quick.value = false;
  }, 150);
}
function uploadStep(value: number) {
  setTimeout(
    () => {
      if (value < 100) {
        uploadStep(Math.min(100, value + 5));
        return;
      }
      uploading.value = false;
      uploaded.value = undefined;
    },
    value < 100 ? 150 : 400,
  );
  uploaded.value = value;
}
function upload() {
  uploadStep(0);
  uploading.value = true;
}
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column' })">
    <div :class="stack({ gap: 'xs', direction: 'column' })">
      <span :class="caption">Each button keeps its width and colour.</span>
      <div :class="hstack({ gap: 'sm', flexWrap: 'wrap' })">
        <Loading
          :loading="saving"
          variant="busy"
          indicator="inline"
          label="Saving"
        >
          <Button emphasis="primary" :onClick="save">Save changes</Button>
        </Loading>
        <Loading
          :loading="publishing"
          variant="busy"
          indicator="inline"
          label="Publishing"
        >
          <Button emphasis="secondary" :onClick="publish">Publish</Button>
        </Loading>
        <Loading
          :loading="retrying"
          variant="busy"
          indicator="inline"
          label="Retrying"
        >
          <Button emphasis="ghost" :onClick="retry">Retry</Button>
        </Loading>
        <Loading
          :loading="quick"
          variant="busy"
          indicator="inline"
          label="Copying"
        >
          <Button emphasis="secondary" :onClick="copy">Copy link (fast)</Button>
        </Loading>
      </div>
    </div>

    <div :class="stack({ gap: 'xs', direction: 'column' })">
      <span :class="caption"
        >Known progress: the ring fills and the percentage replaces the
        label.</span
      >
      <div
        :class="hstack({ gap: 'sm', flexWrap: 'wrap', alignItems: 'center' })"
      >
        <Loading
          :loading="uploading"
          variant="busy"
          indicator="inline"
          :progress="uploaded"
          label="Uploading"
        >
          <Button emphasis="primary" size="lg" :onClick="upload"
            >Upload report</Button
          >
        </Loading>
        <Loading
          :loading="uploading"
          variant="busy"
          indicator="inline"
          :progress="uploaded"
          label="Uploading"
        >
          <Button emphasis="secondary" size="sm">Attach</Button>
        </Loading>
      </div>
    </div>
  </div>
</template>

Each button keeps its width and colour.

Known progress: the ring fills and the percentage replaces the label.

// GENERATED from packages/demos/loading/button.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Loading } from "@pindoba/solid-loading";
import { Button } from "@pindoba/solid-button";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const caption = css({ color: "neutral.text.muted", fontSize: "sm" });
export default function ButtonDemo() {
  const [saving, setSaving] = createSignal(false);
  const [publishing, setPublishing] = createSignal(false);
  const [retrying, setRetrying] = createSignal(false);
  const [quick, setQuick] = createSignal(false);
  const [uploading, setUploading] = createSignal(false);
  const [uploaded, setUploaded] = createSignal(undefined as number | undefined);

  function save() {
    setSaving(true);
    setTimeout(() => {
      setSaving(false);
    }, 2000);
  }

  function publish() {
    setPublishing(true);
    setTimeout(() => {
      setPublishing(false);
    }, 2000);
  }

  function retry() {
    setRetrying(true);
    setTimeout(() => {
      setRetrying(false);
    }, 2000);
  }

  function copy() {
    setQuick(true);
    setTimeout(() => {
      setQuick(false);
    }, 150);
  }

  function uploadStep(value: number) {
    setTimeout(
      () => {
        if (value < 100) {
          uploadStep(Math.min(100, value + 5));
          return;
        }
        setUploading(false);
        setUploaded(undefined);
      },
      value < 100 ? 150 : 400,
    );
    setUploaded(value);
  }

  function upload() {
    uploadStep(0);
    setUploading(true);
  }

  return (
    <div class={stack({ gap: "lg", direction: "column" })}>
      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={caption}>Each button keeps its width and colour.</span>
        <div class={hstack({ gap: "sm", flexWrap: "wrap" })}>
          <Loading
            loading={saving()}
            variant="busy"
            indicator="inline"
            label="Saving"
          >
            <Button emphasis="primary" onClick={save}>
              Save changes
            </Button>
          </Loading>
          <Loading
            loading={publishing()}
            variant="busy"
            indicator="inline"
            label="Publishing"
          >
            <Button emphasis="secondary" onClick={publish}>
              Publish
            </Button>
          </Loading>
          <Loading
            loading={retrying()}
            variant="busy"
            indicator="inline"
            label="Retrying"
          >
            <Button emphasis="ghost" onClick={retry}>
              Retry
            </Button>
          </Loading>
          <Loading
            loading={quick()}
            variant="busy"
            indicator="inline"
            label="Copying"
          >
            <Button emphasis="secondary" onClick={copy}>
              Copy link (fast)
            </Button>
          </Loading>
        </div>
      </div>

      <div class={stack({ gap: "xs", direction: "column" })}>
        <span class={caption}>
          Known progress: the ring fills and the percentage replaces the label.
        </span>
        <div
          class={hstack({ gap: "sm", flexWrap: "wrap", alignItems: "center" })}
        >
          <Loading
            loading={uploading()}
            variant="busy"
            indicator="inline"
            progress={uploaded()}
            label="Uploading"
          >
            <Button emphasis="primary" size="lg" onClick={upload}>
              Upload report
            </Button>
          </Loading>
          <Loading
            loading={uploading()}
            variant="busy"
            indicator="inline"
            progress={uploaded()}
            label="Uploading"
          >
            <Button emphasis="secondary" size="sm">
              Attach
            </Button>
          </Loading>
        </div>
      </div>
    </div>
  );
}

Overlay

For a card, a panel or a whole form: a light tint over the content and a card with the spinner, the label as a visible message and — with progress — the percentage. Set --pindoba-loading-radius on the region to match the content’s corner radius (default md).

Over a region taller than the screen, the card stays on screen: it keeps to the middle of the viewport while the region fills it, and to the screen’s edge while only part of the region shows. Inside a scrolling container, that container is the screen.

PreviewCode

Report progress

---
// GENERATED from packages/demos/loading/overlay.demo.tsx — edit the source, not this file.
import Loading from "@pindoba/astro-loading";
import Input from "@pindoba/astro-input";
import Button from "@pindoba/astro-button";
import Checkbox from "@pindoba/astro-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const saving = false;
const progress = undefined as number | undefined;
---

<div
  class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}
  data-ir-root="loading/overlay"
>
  <Checkbox
    id="astro-demo-loading-overlay-progress"
    appearance="switch"
    data-ir="1"
  >
    Report progress
  </Checkbox>

  <Loading
    loading={saving}
    variant="busy"
    indicator="overlay"
    label="Saving your profile…"
    progress={progress}
    data-ir="2"
  >
    <form
      class={stack({
        gap: "md",
        direction: "column",
        p: "lg",
        borderWidth: "1px",
        borderStyle: "solid",
        borderColor: "neutral.border.muted",
        borderRadius: "md",
      })}
      data-ir="3"
    >
      <h3 class={css({ fontSize: "lg", fontWeight: "bold", margin: "0" })}>
        Profile
      </h3>
      <Input placeholder="Display name" value="Margaret Hamilton" />
      <Input placeholder="Email" type="email" value="margaret@apollo.dev" />
      <div class={hstack({ gap: "sm" })}>
        <Button emphasis="primary" type="submit">
          Save profile
        </Button>
        <Button emphasis="ghost" type="button">
          Cancel
        </Button>
      </div>
    </form>
  </Loading>
</div>

<script>
  import { hydrate } from "./_client/overlay.ts";

  document
    .querySelectorAll('[data-ir-root="loading/overlay"]')
    .forEach((root) => hydrate([root]));
</script>

Report progress

// GENERATED from packages/demos/loading/overlay.demo.tsx — edit the source, not this file.
import { type SyntheticEvent as ReactSyntheticEvent, useState } from "react";
import { Loading } from "@pindoba/react-loading";
import { Input } from "@pindoba/react-input";
import { Button } from "@pindoba/react-button";
import { Checkbox } from "@pindoba/react-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function OverlayDemo() {
  const [saving, setSaving] = useState(false);
  const [withProgress, setWithProgress] = useState(false);
  const [progress, setProgress] = useState(undefined as number | undefined);

  function step(value: number) {
    setTimeout(
      () => {
        if (value < 100) {
          step(Math.min(100, value + 4));
          return;
        }
        setSaving(false);
        setProgress(undefined);
      },
      value < 100 ? 120 : 400,
    );
    setProgress(value);
  }

  function save(event: ReactSyntheticEvent) {
    event.preventDefault();
    if (withProgress) step(0);
    else
      setTimeout(() => {
        setSaving(false);
      }, 2500);
    setSaving(true);
  }

  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <Checkbox
        id="react-demo-loading-overlay-progress"
        appearance="switch"
        checked={withProgress}
        onChange={(e) => setWithProgress(e.currentTarget.checked)}
      >
        Report progress
      </Checkbox>

      <Loading
        loading={saving}
        variant="busy"
        indicator="overlay"
        label="Saving your profile…"
        progress={progress}
      >
        <form
          className={stack({
            gap: "md",
            direction: "column",
            p: "lg",
            borderWidth: "1px",
            borderStyle: "solid",
            borderColor: "neutral.border.muted",
            borderRadius: "md",
          })}
          onSubmit={save}
        >
          <h3
            className={css({ fontSize: "lg", fontWeight: "bold", margin: "0" })}
          >
            Profile
          </h3>
          <Input placeholder="Display name" defaultValue="Margaret Hamilton" />
          <Input
            placeholder="Email"
            type="email"
            defaultValue="margaret@apollo.dev"
          />
          <div className={hstack({ gap: "sm" })}>
            <Button emphasis="primary" type="submit">
              Save profile
            </Button>
            <Button emphasis="ghost" type="button">
              Cancel
            </Button>
          </div>
        </form>
      </Loading>
    </div>
  );
}

Report progress

<script lang="ts">
  // GENERATED from packages/demos/loading/overlay.demo.tsx — edit the source, not this file.
  import Loading from "@pindoba/svelte-loading";
  import Input from "@pindoba/svelte-input";
  import Button from "@pindoba/svelte-button";
  import Checkbox from "@pindoba/svelte-checkbox";
  import { stack, hstack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  let saving = $state(false);
  let withProgress = $state(false);
  let progress = $state(undefined as number | undefined);

  function step(value: number) {
    setTimeout(
      () => {
        if (value < 100) {
          step(Math.min(100, value + 4));
          return;
        }
        saving = false;
        progress = undefined;
      },
      value < 100 ? 120 : 400,
    );
    progress = value;
  }
  function save(event: SubmitEvent) {
    event.preventDefault();
    if (withProgress) step(0);
    else
      setTimeout(() => {
        saving = false;
      }, 2500);
    saving = true;
  }
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <Checkbox
    id="svelte-demo-loading-overlay-progress"
    appearance="switch"
    bind:checked={withProgress}
  >
    Report progress
  </Checkbox>

  <Loading
    loading={saving}
    variant="busy"
    indicator="overlay"
    label="Saving your profile…"
    {progress}
  >
    <form
      class={stack({
        gap: "md",
        direction: "column",
        p: "lg",
        borderWidth: "1px",
        borderStyle: "solid",
        borderColor: "neutral.border.muted",
        borderRadius: "md",
      })}
      onsubmit={save}
    >
      <h3 class={css({ fontSize: "lg", fontWeight: "bold", margin: "0" })}>
        Profile
      </h3>
      <Input placeholder="Display name" value="Margaret Hamilton"></Input>
      <Input placeholder="Email" type="email" value="margaret@apollo.dev"
      ></Input>
      <div class={hstack({ gap: "sm" })}>
        <Button emphasis="primary" type="submit">Save profile</Button>
        <Button emphasis="ghost" type="button">Cancel</Button>
      </div>
    </form>
  </Loading>
</div>

Report progress

<script setup lang="ts">
// GENERATED from packages/demos/loading/overlay.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Input } from "@pindoba/vue-input";
import { Button } from "@pindoba/vue-button";
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const saving = ref(false);
const withProgress = ref(false);
const progress = ref(undefined as number | undefined);

function step(value: number) {
  setTimeout(
    () => {
      if (value < 100) {
        step(Math.min(100, value + 4));
        return;
      }
      saving.value = false;
      progress.value = undefined;
    },
    value < 100 ? 120 : 400,
  );
  progress.value = value;
}
function save(event: SubmitEvent) {
  event.preventDefault();
  if (withProgress.value) step(0);
  else
    setTimeout(() => {
      saving.value = false;
    }, 2500);
  saving.value = true;
}
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <Checkbox
      id="vue-demo-loading-overlay-progress"
      appearance="switch"
      :checked="withProgress"
      :onChange="
        (e: Event) => (withProgress = (e.target as HTMLInputElement).checked)
      "
    >
      Report progress
    </Checkbox>

    <Loading
      :loading="saving"
      variant="busy"
      indicator="overlay"
      label="Saving your profile…"
      :progress="progress"
    >
      <form
        :class="
          stack({
            gap: 'md',
            direction: 'column',
            p: 'lg',
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: 'neutral.border.muted',
            borderRadius: 'md',
          })
        "
        :onSubmit="save"
      >
        <h3 :class="css({ fontSize: 'lg', fontWeight: 'bold', margin: '0' })">
          Profile
        </h3>
        <Input placeholder="Display name" value="Margaret Hamilton"></Input>
        <Input
          placeholder="Email"
          type="email"
          value="margaret@apollo.dev"
        ></Input>
        <div :class="hstack({ gap: 'sm' })">
          <Button emphasis="primary" type="submit">Save profile</Button>
          <Button emphasis="ghost" type="button">Cancel</Button>
        </div>
      </form>
    </Loading>
  </div>
</template>

Report progress

// GENERATED from packages/demos/loading/overlay.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Loading } from "@pindoba/solid-loading";
import { Input } from "@pindoba/solid-input";
import { Button } from "@pindoba/solid-button";
import { Checkbox } from "@pindoba/solid-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function OverlayDemo() {
  const [saving, setSaving] = createSignal(false);
  const [withProgress, setWithProgress] = createSignal(false);
  const [progress, setProgress] = createSignal(undefined as number | undefined);

  function step(value: number) {
    setTimeout(
      () => {
        if (value < 100) {
          step(Math.min(100, value + 4));
          return;
        }
        setSaving(false);
        setProgress(undefined);
      },
      value < 100 ? 120 : 400,
    );
    setProgress(value);
  }

  function save(event: SubmitEvent) {
    event.preventDefault();
    if (withProgress()) step(0);
    else
      setTimeout(() => {
        setSaving(false);
      }, 2500);
    setSaving(true);
  }

  return (
    <div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <Checkbox
        id="solid-demo-loading-overlay-progress"
        appearance="switch"
        checked={withProgress()}
        onChange={(e) => setWithProgress(e.currentTarget.checked)}
      >
        Report progress
      </Checkbox>

      <Loading
        loading={saving()}
        variant="busy"
        indicator="overlay"
        label="Saving your profile…"
        progress={progress()}
      >
        <form
          class={stack({
            gap: "md",
            direction: "column",
            p: "lg",
            borderWidth: "1px",
            borderStyle: "solid",
            borderColor: "neutral.border.muted",
            borderRadius: "md",
          })}
          onSubmit={save}
        >
          <h3 class={css({ fontSize: "lg", fontWeight: "bold", margin: "0" })}>
            Profile
          </h3>
          <Input placeholder="Display name" value="Margaret Hamilton" />
          <Input placeholder="Email" type="email" value="margaret@apollo.dev" />
          <div class={hstack({ gap: "sm" })}>
            <Button emphasis="primary" type="submit">
              Save profile
            </Button>
            <Button emphasis="ghost" type="button">
              Cancel
            </Button>
          </div>
        </form>
      </Loading>
    </div>
  );
}

Bar

For lists, tables and feeds being refreshed: a thin line along the top edge that never covers a row.

PreviewCode

#4182mainPassed
#4181feat/uploadFailed
#4180fix/focusPassed
#4179mainQueued

---
// GENERATED from packages/demos/loading/bar.demo.tsx — edit the source, not this file.
import Loading from "@pindoba/astro-loading";
import Button from "@pindoba/astro-button";
import Badge from "@pindoba/astro-badge";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const builds = [
  { id: "#4182", branch: "main", status: "Passed", tone: "success" },
  { id: "#4181", branch: "feat/upload", status: "Failed", tone: "danger" },
  { id: "#4180", branch: "fix/focus", status: "Passed", tone: "success" },
  { id: "#4179", branch: "main", status: "Queued", tone: "neutral" },
] as const;

const refreshing = false;
---

<div
  class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}
  data-ir-root="loading/bar"
>
  <div class={hstack({ gap: "md", alignItems: "center" })}>
    <Button emphasis="secondary" size="sm" data-ir="1">
      Refresh
    </Button>
  </div>

  <Loading
    loading={refreshing}
    variant="busy"
    indicator="bar"
    label="Refreshing builds"
    data-ir="2"
  >
    <ul
      class={stack({
        gap: "0",
        direction: "column",
        listStyle: "none",
        padding: "0",
        margin: "0",
        borderWidth: "1px",
        borderStyle: "solid",
        borderColor: "neutral.border.muted",
        borderRadius: "md",
      })}
    >
      <!--ir:3-->
      {builds.map((build) => (
        <li
          class={hstack({
            gap: "md",
            justifyContent: "space-between",
            px: "md",
            py: "sm",
            "&:not(:last-child)": {
              borderBottomWidth: "1px",
              borderBottomStyle: "solid",
              borderBottomColor: "neutral.border.muted",
            },
          })}
          data-ir-key={build.id}
        >
          <span class={hstack({ gap: "sm" })}>
            <strong>
              <!--ir:4-->
              {build.id}
              <!--/ir-->
            </strong>
            <span class={css({ color: "neutral.text.muted" })}>
              <!--ir:5-->
              {build.branch}
              <!--/ir-->
            </span>
          </span>
          <Badge tone={build.tone} size="sm" data-ir="6">
            <Fragment set:html="<!--ir:7-->" />
            {build.status}
            <Fragment set:html="<!--/ir-->" />
          </Badge>
        </li>
      ))}
      <!--/ir-->
    </ul>
  </Loading>
</div>

<script>
  import { hydrate } from "./_client/bar.ts";

  document
    .querySelectorAll('[data-ir-root="loading/bar"]')
    .forEach((root) => hydrate([root]));
</script>

#4182mainPassed
#4181feat/uploadFailed
#4180fix/focusPassed
#4179mainQueued

// GENERATED from packages/demos/loading/bar.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Loading } from "@pindoba/react-loading";
import { Button } from "@pindoba/react-button";
import { Badge } from "@pindoba/react-badge";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const builds = [
  { id: "#4182", branch: "main", status: "Passed", tone: "success" },
  { id: "#4181", branch: "feat/upload", status: "Failed", tone: "danger" },
  { id: "#4180", branch: "fix/focus", status: "Passed", tone: "success" },
  { id: "#4179", branch: "main", status: "Queued", tone: "neutral" },
] as const;
export default function BarDemo() {
  const [refreshing, setRefreshing] = useState(false);

  function refresh() {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }

  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div className={hstack({ gap: "md", alignItems: "center" })}>
        <Button emphasis="secondary" size="sm" onClick={refresh}>
          Refresh
        </Button>
      </div>

      <Loading
        loading={refreshing}
        variant="busy"
        indicator="bar"
        label="Refreshing builds"
      >
        <ul
          className={stack({
            gap: "0",
            direction: "column",
            listStyle: "none",
            padding: "0",
            margin: "0",
            borderWidth: "1px",
            borderStyle: "solid",
            borderColor: "neutral.border.muted",
            borderRadius: "md",
          })}
        >
          {builds.map((build) => (
            <li
              key={build.id}
              className={hstack({
                gap: "md",
                justifyContent: "space-between",
                px: "md",
                py: "sm",
                "&:not(:last-child)": {
                  borderBottomWidth: "1px",
                  borderBottomStyle: "solid",
                  borderBottomColor: "neutral.border.muted",
                },
              })}
            >
              <span className={hstack({ gap: "sm" })}>
                <strong>{build.id}</strong>
                <span className={css({ color: "neutral.text.muted" })}>
                  {build.branch}
                </span>
              </span>
              <Badge tone={build.tone} size="sm">
                {build.status}
              </Badge>
            </li>
          ))}
        </ul>
      </Loading>
    </div>
  );
}

#4182 main Passed
#4181 feat/upload Failed
#4180 fix/focus Passed
#4179 main Queued

<script lang="ts">
  // GENERATED from packages/demos/loading/bar.demo.tsx — edit the source, not this file.
  import Loading from "@pindoba/svelte-loading";
  import Button from "@pindoba/svelte-button";
  import Badge from "@pindoba/svelte-badge";
  import { stack, hstack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const builds = [
    { id: "#4182", branch: "main", status: "Passed", tone: "success" },
    { id: "#4181", branch: "feat/upload", status: "Failed", tone: "danger" },
    { id: "#4180", branch: "fix/focus", status: "Passed", tone: "success" },
    { id: "#4179", branch: "main", status: "Queued", tone: "neutral" },
  ] as const;

  let refreshing = $state(false);

  function refresh() {
    refreshing = true;
    setTimeout(() => {
      refreshing = false;
    }, 2000);
  }
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <div class={hstack({ gap: "md", alignItems: "center" })}>
    <Button emphasis="secondary" size="sm" onclick={refresh}>Refresh</Button>
  </div>

  <Loading
    loading={refreshing}
    variant="busy"
    indicator="bar"
    label="Refreshing builds"
  >
    <ul
      class={stack({
        gap: "0",
        direction: "column",
        listStyle: "none",
        padding: "0",
        margin: "0",
        borderWidth: "1px",
        borderStyle: "solid",
        borderColor: "neutral.border.muted",
        borderRadius: "md",
      })}
    >
      {#each builds as build (build.id)}
        <li
          class={hstack({
            gap: "md",
            justifyContent: "space-between",
            px: "md",
            py: "sm",
            "&:not(:last-child)": {
              borderBottomWidth: "1px",
              borderBottomStyle: "solid",
              borderBottomColor: "neutral.border.muted",
            },
          })}
        >
          <span class={hstack({ gap: "sm" })}>
            <strong>
              {build.id}
            </strong>
            <span class={css({ color: "neutral.text.muted" })}>
              {build.branch}
            </span>
          </span>
          <Badge tone={build.tone} size="sm">
            {build.status}
          </Badge>
        </li>
      {/each}
    </ul>
  </Loading>
</div>

#4182mainPassed
#4181feat/uploadFailed
#4180fix/focusPassed
#4179mainQueued

<script setup lang="ts">
// GENERATED from packages/demos/loading/bar.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Button } from "@pindoba/vue-button";
import { Badge } from "@pindoba/vue-badge";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const builds = [
  { id: "#4182", branch: "main", status: "Passed", tone: "success" },
  { id: "#4181", branch: "feat/upload", status: "Failed", tone: "danger" },
  { id: "#4180", branch: "fix/focus", status: "Passed", tone: "success" },
  { id: "#4179", branch: "main", status: "Queued", tone: "neutral" },
] as const;

const refreshing = ref(false);

function refresh() {
  refreshing.value = true;
  setTimeout(() => {
    refreshing.value = false;
  }, 2000);
}
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center' })">
      <Button emphasis="secondary" size="sm" :onClick="refresh">Refresh</Button>
    </div>

    <Loading
      :loading="refreshing"
      variant="busy"
      indicator="bar"
      label="Refreshing builds"
    >
      <ul
        :class="
          stack({
            gap: '0',
            direction: 'column',
            listStyle: 'none',
            padding: '0',
            margin: '0',
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: 'neutral.border.muted',
            borderRadius: 'md',
          })
        "
      >
        <li
          v-for="build in builds"
          :key="build.id"
          :class="
            hstack({
              gap: 'md',
              justifyContent: 'space-between',
              px: 'md',
              py: 'sm',
              '&:not(:last-child)': {
                borderBottomWidth: '1px',
                borderBottomStyle: 'solid',
                borderBottomColor: 'neutral.border.muted',
              },
            })
          "
        >
          <span :class="hstack({ gap: 'sm' })">
            <strong>{{ build.id }}</strong>
            <span :class="css({ color: 'neutral.text.muted' })">{{
              build.branch
            }}</span>
          </span>
          <Badge :tone="build.tone" size="sm">{{ build.status }}</Badge>
        </li>
      </ul>
    </Loading>
  </div>
</template>

#4182mainPassed
#4181feat/uploadFailed
#4180fix/focusPassed
#4179mainQueued

// GENERATED from packages/demos/loading/bar.demo.tsx — edit the source, not this file.
import { createSignal, For } from "solid-js";
import { Loading } from "@pindoba/solid-loading";
import { Button } from "@pindoba/solid-button";
import { Badge } from "@pindoba/solid-badge";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const builds = [
  { id: "#4182", branch: "main", status: "Passed", tone: "success" },
  { id: "#4181", branch: "feat/upload", status: "Failed", tone: "danger" },
  { id: "#4180", branch: "fix/focus", status: "Passed", tone: "success" },
  { id: "#4179", branch: "main", status: "Queued", tone: "neutral" },
] as const;
export default function BarDemo() {
  const [refreshing, setRefreshing] = createSignal(false);

  function refresh() {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }

  return (
    <div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div class={hstack({ gap: "md", alignItems: "center" })}>
        <Button emphasis="secondary" size="sm" onClick={refresh}>
          Refresh
        </Button>
      </div>

      <Loading
        loading={refreshing()}
        variant="busy"
        indicator="bar"
        label="Refreshing builds"
      >
        <ul
          class={stack({
            gap: "0",
            direction: "column",
            listStyle: "none",
            padding: "0",
            margin: "0",
            borderWidth: "1px",
            borderStyle: "solid",
            borderColor: "neutral.border.muted",
            borderRadius: "md",
          })}
        >
          <For each={builds}>
            {(build) => (
              <li
                class={hstack({
                  gap: "md",
                  justifyContent: "space-between",
                  px: "md",
                  py: "sm",
                  "&:not(:last-child)": {
                    borderBottomWidth: "1px",
                    borderBottomStyle: "solid",
                    borderBottomColor: "neutral.border.muted",
                  },
                })}
              >
                <span class={hstack({ gap: "sm" })}>
                  <strong>{build.id}</strong>
                  <span class={css({ color: "neutral.text.muted" })}>
                    {build.branch}
                  </span>
                </span>
                <Badge tone={build.tone} size="sm">
                  {build.status}
                </Badge>
              </li>
            )}
          </For>
        </ul>
      </Loading>
    </div>
  );
}

Corner

For small blocks and rows, where a card over the content would cover it: a spinner stamp on the top-end corner, rendered via Attachment.

PreviewCode