<script lang="ts">
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';

	onMount(() => {
		// Generate workspace ID client-side for static deployment
		const workspaceId = crypto.randomUUID();
		goto(`/${workspaceId}`, { replaceState: true });
	});
</script>

<div class="fixed inset-0 flex items-center justify-center bg-[#192437]">
	<div class="text-center">
		<div class="mb-4">
			<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
		</div>
		<h1 class="text-2xl font-bold text-white mb-2">🤖 LeRobot Arena</h1>
		<p class="text-gray-300">Creating your workspace...</p>
	</div>
</div> 