Skeleton

<script lang="ts">
	import Skeleton from '@tcpsystems/ui/foundation/Skeleton';
</script>

<Skeleton height="var(--tcp-size-row)" label="Loading deployments" />

<script lang="ts">
	import Skeleton from '@tcpsystems/ui/foundation/Skeleton';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack aria-busy="true" aria-label="Loading invoice summary">
	<Skeleton width="40%" label="Loading invoice summary" />
	<Skeleton />
	<Skeleton width="70%" />
	<Skeleton height="var(--tcp-space-16)" />
</Stack>

<script lang="ts">
	import Skeleton from '@tcpsystems/ui/foundation/Skeleton';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let loading = $state(true);
</script>

<Stack>
	<Stack aria-busy={loading}>
		{#if loading}
			<Skeleton height="var(--tcp-size-row)" label="Loading invoice INV-2048" />
		{:else}
			<p role="status">Invoice INV-2048 · Paid · €240.00</p>
		{/if}
	</Stack>
	<Button onclick={() => loading = !loading}>{loading ? 'Show invoice' : 'Reload invoice'}</Button>
</Stack>