From 9e02813d1997a0e1aeeb42943318de19c2633744 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 16:41:07 +0100
Subject: [PATCH] feat: add animated CSS loader during preview reload
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Displays a spinning loader in the top-right corner of the iframe while PagedJS is rendering. The loader automatically adjusts position when the editor panel is open.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.vue | 49 ++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4441e9d..24f9cc7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,7 +16,7 @@ provide('activeTab', activeTab);
 
 let savedScrollPercentage = 0;
 const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
-let isTransitioning = false;
+const isTransitioning = ref(false);
 
 const activeFrame = computed(() => {
   return currentFrameIndex.value === 1
@@ -25,8 +25,8 @@ const activeFrame = computed(() => {
 });
 
 const renderPreview = async (shouldReloadFromFile = false) => {
-  if (isTransitioning) return;
-  isTransitioning = true;
+  if (isTransitioning.value) return;
+  isTransitioning.value = true;
 
   // Determine which iframe is currently visible and which to render to
   const visibleFrame =
@@ -35,7 +35,7 @@ const renderPreview = async (shouldReloadFromFile = false) => {
     currentFrameIndex.value === 1 ? previewFrame2.value : previewFrame1.value;
 
   if (!hiddenFrame) {
-    isTransitioning = false;
+    isTransitioning.value = false;
     return;
   }
 
@@ -112,7 +112,7 @@ const renderPreview = async (shouldReloadFromFile = false) => {
 
           // Swap current frame
           currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1;
-          isTransitioning = false;
+          isTransitioning.value = false;
         }, 200); // Match CSS transition duration
       }, 50); // Small delay to ensure scroll is set
     }, 200); // Wait for PagedJS
@@ -147,6 +147,10 @@ onMounted(() => renderPreview(true));
     :class="{ shifted: activeTab.length > 0 }"
   ></iframe>
 
+  <div v-if="isTransitioning" class="preview-loader" :class="{ shifted: activeTab.length > 0 }">
+    <div class="spinner"></div>
+  </div>
+
   <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
 </template>
 
@@ -179,4 +183,39 @@ onMounted(() => renderPreview(true));
   z-index: 0;
   opacity: 0;
 }
+
+.preview-loader {
+  position: fixed;
+  top: 2rem;
+  right: 2rem;
+  z-index: 1000;
+  pointer-events: none;
+  transition: all 0.2s ease-in-out var(--curve);
+}
+
+.preview-loader.shifted {
+  right: calc(2rem + 19rem * 0.7);
+  top: calc(2rem - 30vh * 0.7);
+  transform: scale(0.7);
+}
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid #fff;
+  border-right: 3px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>