Spinner

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

<Spinner label="Loading deployments" />

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

<Cluster>
	<Spinner label="Deploying gateway" />
	<span aria-hidden="true">Deploying gateway…</span>
</Cluster>

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

<Stack>
	{#if loading}<Spinner label="Checking gateway health" />{:else}<p role="status">Gateway is healthy.</p>{/if}
	<Button onclick={() => loading = !loading}>{loading ? 'Finish health check' : 'Check again'}</Button>
</Stack>