changes

app/assets/styles/main.scss

@@ -1,5 +1,6 @@
 @use "utils.scss";
 @use "overrides-components.scss";
+@use "scrollbar.scss";
 
 :root {
   font-size: 15px;

app/assets/styles/scrollbar.scss

@@ -0,0 +1,14 @@
+// Fix: Scrollbar causing layout shift
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #888 transparent;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}

app/components/AppLoading.vue

@@ -1,67 +0,0 @@
-<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>

app/components/Modal.vue

@@ -141,13 +141,18 @@ function closeOnEsc(e) {
 
 onMounted(() => {
   window.addEventListener("keydown", closeOnEsc);
+  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+  document.documentElement.style.cssText += ` ;padding-right: ${scrollbarWidth}px;`;
   document.documentElement.classList.add("is-clipped");
 });
 
 onUnmounted(() => {
   window.removeEventListener("keydown", closeOnEsc);
   const remaining = document.getElementsByClassName("modal-background").length;
-  if (remaining === 0) document.documentElement.classList.remove("is-clipped");
+  if (remaining === 0) {
+    document.documentElement.classList.remove("is-clipped");
+    document.documentElement.style.removeProperty("padding-right");
+  }
 });
 
 const loaded = ref(false);

app/pages/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <Transition>
+  <ClientOnly>
-    <AppLoading v-if="!$store.ready" />
-  </Transition>
-  <ClientOnly v-if="$store.ready">
     <TopMenu @changeTab="changeTab" />
     <main class="is-flex-grow-1 is-flex is-flex-direction-column is-gap-1">
       <div

app/plugins/03-api-loader.js

@@ -1,5 +1,4 @@
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(async (nuxtApp) => {
-  const store = useStore();
   const { $getapi, $readyapi } = nuxtApp;
   const connlist = $readyapi([
     "common",
@@ -19,7 +18,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   async function getReady() {
     try {
       await $getapi(notReadyConns);
-      store.ready = true;
     } catch (error) {
       showError({
         statusCode: 500,
@@ -27,5 +25,5 @@ export default defineNuxtPlugin((nuxtApp) => {
       });
     }
   }
-  if (notReadyConns.length > 0) getReady();
+  if (notReadyConns.length > 0) await getReady();
 });

app/plugins/05-artificial-delay.js

@@ -0,0 +1,12 @@
+export default defineNuxtPlugin(async () => {
+  const loadTime = performance.now();
+  const minDuration = 2000;
+
+  if (loadTime < minDuration) {
+    await new Promise((r) => setTimeout(r, minDuration - loadTime));
+  }
+
+  // nuxtApp.hook('app:mounted', () => {
+  //   console.log('app.mount() completed at', performance.now())
+  // });
+});

app/spa-loading-template.html

@@ -0,0 +1,68 @@
+<div id="loading-overlay">
+  <div id="loading-content">
+    <img
+      src="/favicon.svg"
+      width="80"
+      class="pulse"
+    />
+    <p id="elapsed"></p>
+  </div>
+</div>
+
+<style>
+  * {
+    scrollbar-width: none;
+  }
+  ::-webkit-scrollbar {
+    width: 0px;
+  }
+  #loading-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+  }
+  #loading-content {
+    position: absolute;
+    display: flex;
+    gap: 1.5rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    top: 40%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .pulse {
+    animation: pulse 2s infinite;
+  }
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+</style>
+
+<script>
+  function displayElapsed() {
+    const start = Date.now();
+    let elapsed = 0;
+    const elapsedInterval = setInterval(() => {
+      elapsed = Date.now() - start;
+      const elapsedDiv = document.getElementById("elapsed");
+      if (!elapsedDiv) {
+        clearInterval(elapsedInterval);
+        return;
+      }
+      elapsedDiv.textContent = (elapsed / 1000).toFixed(1);
+    }, 200);
+  }
+
+  // displayElapsed(); // debug
+</script>

app/stores/index.js

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