Swaps child content with a loading spinner without changing the element size.
<script lang="ts">
import { Button } from "$lib/components/ui/button";
import { LoadingSwap } from "$lib/components/ui/loading-swap";
let isLoading = $state(false);
</script>
<Button
onclick={async () => {
// Simulate loading state
isLoading = true;
await new Promise((res) => setTimeout(res, 1000));
isLoading = false;
}}
>
<LoadingSwap {isLoading}>Click Me</LoadingSwap>
</Button>pnpm dlx shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/loading-swap.jsonnpx shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/loading-swap.jsonbun x shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/loading-swap.jsonyarn shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/loading-swap.jsonCopy and paste the component source files linked at the top of this page into your project.
<script lang="ts">
import { LoadingSwap } from '$lib/components/ui/loading-swap';
</script>
<LoadingSwap isLoading>Search</LoadingSwap>Can be used to wrap any components
<script lang="ts">
import { Button } from "$lib/components/ui/button";
import {
Card,
CardDescription,
CardHeader,
CardTitle
} from "$lib/components/ui/card";
import { LoadingSwap } from "$lib/components/ui/loading-swap";
let isLoading = $state(false);
</script>
<div class="flex flex-col gap-2">
<Button onclick={() => (isLoading = !isLoading)} class="w-fit"
>Toggle Loading</Button
>
<Card class="w-96">
<LoadingSwap {isLoading}>
<CardHeader>
<CardTitle>Larger Component</CardTitle>
<CardDescription>Can be used to wrap any components</CardDescription>
</CardHeader>
</LoadingSwap>
</Card>
</div>