<script lang="ts">
	import { onDestroy } from 'svelte';

	let show = false;
	const timeout = setTimeout(() => (show = true), 150);

	onDestroy(() => clearTimeout(timeout));
</script>

{#if show}
	<div class="flex h-full w-full items-center justify-center">
		<span class="spinner" />
	</div>
{/if}

<style lang="postcss">
	.spinner {
		width: 64px;
		height: 64px;
		border: 5px solid theme(colors.gray.200);
		border-bottom-color: transparent;
		border-radius: 50%;
		display: inline-block;
		box-sizing: border-box;
		animation: rotation 1s linear infinite;
	}

	@keyframes rotation {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>