<template>
  <div class="absolute inset-0">
    <ClientOnly>
      <div class="absolute inset-0">
        <slot />
      </div>
      <template #fallback>
        <div class="h-screen flex flex-col items-center justify-center gap-4 bg-base-200">
          <span class="loading loading-spinner loading-lg text-primary" />
          <p class="text-base-content/80 font-medium">Loading map…</p>
          <div class="flex gap-2">
            <div class="w-24 h-3 rounded bg-base-300 animate-pulse" />
            <div class="w-32 h-3 rounded bg-base-300 animate-pulse" />
            <div class="w-20 h-3 rounded bg-base-300 animate-pulse" />
          </div>
        </div>
      </template>
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
</script>
