changes

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);