Spinner

1
import { Item, ItemContent, ItemMedia, ItemTitle } from "~/components/ui/item";
2
import { Spinner } from "~/components/ui/spinner";
3

4
export default function SpinnerDemo() {
5
  return (
6
    <div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
7
      <Item variant="muted">
8
        <ItemMedia>
9
          <Spinner />
10
        </ItemMedia>
11
        <ItemContent>
12
          <ItemTitle class="line-clamp-1">Processing payment...</ItemTitle>
13
        </ItemContent>
14
        <ItemContent class="flex-none justify-end">
15
          <span class="text-sm tabular-nums">$100.00</span>
16
        </ItemContent>
17
      </Item>
18
    </div>
19
  );
20
}

1
import { LoaderIcon } from "lucide-solid";
2
import type { ComponentProps } from "solid-js";
3
import { splitProps } from "solid-js";
4
import { cn } from "~/lib/utils";
5

6
type SpinnerProps = ComponentProps<"svg">;
7

8
const Spinner = (props: SpinnerProps) => {
9
  const [local, others] = splitProps(props, ["class"]);
10

11
  return (
12
    <LoaderIcon
13
      role="status"
14
      aria-label="Loading"
15
      class={cn("size-4 animate-spin", local.class)}
16
      {...others}
17
    />
18
  );
19
};
20

21
export default function SpinnerCustom() {
22
  return (
23
    <div class="flex items-center gap-4">
24
      <Spinner />
25
    </div>
26
  );
27
}

1
import { Spinner } from "~/components/ui/spinner";
2

3
export default function SpinnerSize() {
4
  return (
5
    <div class="flex items-center gap-6">
6
      <Spinner class="size-3" />
7
      <Spinner class="size-4" />
8
      <Spinner class="size-6" />
9
      <Spinner class="size-8" />
10
    </div>
11
  );
12
}

1
import { Button } from "~/components/ui/button";
2
import { Spinner } from "~/components/ui/spinner";
3

4
export default function SpinnerButton() {
5
  return (
6
    <div class="flex flex-col items-center gap-4">
7
      <Button disabled size="sm">
8
        <Spinner data-icon="inline-start" />
9
        Loading...
10
      </Button>
11
      <Button variant="outline" disabled size="sm">
12
        <Spinner data-icon="inline-start" />
13
        Please wait
14
      </Button>
15
      <Button variant="secondary" disabled size="sm">
16
        <Spinner data-icon="inline-start" />
17
        Processing
18
      </Button>
19
    </div>
20
  );
21
}

1
import { Badge } from "~/components/ui/badge";
2
import { Spinner } from "~/components/ui/spinner";
3

4
export default function SpinnerBadge() {
5
  return (
6
    <div class="flex items-center gap-4 [--radius:1.2rem]">
7
      <Badge>
8
        <Spinner data-icon="inline-start" />
9
        Syncing
10
      </Badge>
11
      <Badge variant="secondary">
12
        <Spinner data-icon="inline-start" />
13
        Updating
14
      </Badge>
15
      <Badge variant="outline">
16
        <Spinner data-icon="inline-start" />
17
        Processing
18
      </Badge>
19
    </div>
20
  );
21
}

1
import { ArrowUpIcon } from "lucide-solid";
2
import {
3
  InputGroup,
4
  InputGroupAddon,
5
  InputGroupButton,
6
  InputGroupInput,
7
  InputGroupTextarea,
8
} from "~/components/ui/input-group";
9
import { Spinner } from "~/components/ui/spinner";
10

11
export default function SpinnerInputGroup() {
12
  return (
13
    <div class="flex w-full max-w-md flex-col gap-4">
14
      <InputGroup>
15
        <InputGroupInput placeholder="Send a message..." disabled />
16
        <InputGroupAddon align="inline-end">
17
          <Spinner />
18
        </InputGroupAddon>
19
      </InputGroup>
20
      <InputGroup>
21
        <InputGroupTextarea placeholder="Send a message..." disabled />
22
        <InputGroupAddon align="block-end">
23
          <Spinner /> Validating...
24
          <InputGroupButton class="ml-auto" variant="default">
25
            <ArrowUpIcon />
26
            <span class="sr-only">Send</span>
27
          </InputGroupButton>
28
        </InputGroupAddon>
29
      </InputGroup>
30
    </div>
31
  );
32
}

1
import { Button } from "~/components/ui/button";
2
import {
3
  Empty,
4
  EmptyContent,
5
  EmptyDescription,
6
  EmptyHeader,
7
  EmptyMedia,
8
  EmptyTitle,
9
} from "~/components/ui/empty";
10
import { Spinner } from "~/components/ui/spinner";
11

12
export default function SpinnerEmpty() {
13
  return (
14
    <Empty class="w-full">
15
      <EmptyHeader>
16
        <EmptyMedia variant="icon">
17
          <Spinner />
18
        </EmptyMedia>
19
        <EmptyTitle>Processing your request</EmptyTitle>
20
        <EmptyDescription>
21
          Please wait while we process your request. Do not refresh the page.
22
        </EmptyDescription>
23
      </EmptyHeader>
24
      <EmptyContent>
25
        <Button variant="outline" size="sm">
26
          Cancel
27
        </Button>
28
      </EmptyContent>
29
    </Empty>
30
  );
31
}