changes

app/components/AppLoading.vue

@@ -0,0 +1,64 @@
+<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="h-dvh">
+    <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>