<script setup>
const store = useStore();
const elapsed = ref(0);
const ellipsis = ref("");

onMounted(() => {
  const animateDots = setInterval(() => {
    if (ellipsis.value.length < 3) ellipsis.value += ".";
    else ellipsis.value = "";
  }, 500);

  const start = Date.now();
  const timer = setInterval(() => {
    if (store.ready) {
      clearInterval(timer);
      clearInterval(animateDots);
      elapsed.value = 0;
    } else {
      const ms = Date.now() - start;
      elapsed.value = Math.round(ms / 1000);
    }
  }, 100);
});
</script>

<template>
  <div
    class="absolute w-dvw h-dvh has-background-blue-100"
    style="z-index: 40; /* because .navbar is 30 */"
  >
    <div
      class="absolute is-flex is-gap-1.5 is-flex-direction-column is-justify-content-center is-align-items-center"
      style="top: 40%; left: 50%; transform: translateX(-50%)"
    >
      <NuxtImg
        src="/favicon.svg"
        width="72"
        height="72"
        class="pulse"
      />
      <p
        v-if="elapsed > 2"
        class="has-text-grey"
      >
        <span>Đang tải dữ liệu</span>
        <span class="absolute">{{ ellipsis }}</span>
      </p>
    </div>
  </div>
</template>

<style scoped>
.pulse {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>
