tools/ui/src/lib/components/app/server/ServerLoadingSplash.svelte

<script lang="ts">
	import { Server } from '@lucide/svelte';
	import { ServerStatus } from '$lib/components/app';
	import { fade } from 'svelte/transition';

	interface Props {
		class?: string;
		message?: string;
	}

	let { class: className = '', message = 'Initializing connection to server...' }: Props = $props();
</script>

<div class="flex h-full items-center justify-center {className}">
	<div class="text-center">
		<div in:fade={{ duration: 300 }} class="mb-4">
			<div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
				<Server class="h-8 w-8 animate-pulse text-muted-foreground" />
			</div>

			<h2 class="mb-2 text-xl font-semibold">Connecting to Server</h2>

			<p class="text-sm text-muted-foreground">
				{message}
			</p>
		</div>

		<div class="mt-4">
			<ServerStatus class="justify-center" />
		</div>
	</div>
</div>