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>

app/pages/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <ClientOnly>
+  <AppLoading v-if="!$store.ready" />
+  <ClientOnly v-else>
     <TopMenu @changeTab="changeTab" />
     <div class="container">
       <div

app/plugins/03-api-loader.js

@@ -1,4 +1,5 @@
-export default defineNuxtPlugin(async (nuxtApp) => {
+export default defineNuxtPlugin((nuxtApp) => {
+  const store = useStore();
   const { $getapi, $readyapi } = nuxtApp;
   const connlist = $readyapi([
     "common",
@@ -18,5 +19,10 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     "colorscheme",
   ]);
   const notReadyConns = connlist.filter((v) => !v.ready);
-  if (notReadyConns.length > 0) await $getapi(notReadyConns);
+
+  async function getReady() {
+    await $getapi(notReadyConns);
+    store.ready = true;
+  }
+  if (notReadyConns.length > 0) getReady();
 });

app/stores/index.js

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 
 export const useStore = defineStore("maindev", {
   state: () => ({
+    ready: false,
     viewport: undefined,
     login: undefined,
     token: undefined,