<script setup lang="ts">
import { useLoadingStore } from '#layers/stores/useLoadingStore'

const loadingStore = useLoadingStore()
const localLoadings = computed(() => Object.entries(loadingStore.localLoadings))
const canTeleport = (localId: string) => {
  if (!import.meta.client) {
    return false
  }
  return !!document.getElementById(localId)
}
</script>

<template>
  <template v-for="[localId, loadingInfo] in localLoadings" :key="localId">
    <Teleport v-if="canTeleport(localId)" :to="`#${localId}`">
      <Transition name="fade">
        <div v-if="loadingInfo.active" class="spinner-wrap">
          <div class="spinner"></div>
        </div>
      </Transition>
    </Teleport>
  </template>
</template>

<style scoped>
.spinner-wrap {
  @apply absolute inset-0  flex items-center justify-center z-[5];
}
.spinner {
  @apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_white.png')];
}

[data-theme='light'] {
  .spinner {
    @apply bg-[url('/images/common/publisning_template_loader_black.png')];
  }
}
</style>
