src/App.vue

@@ -2,7 +2,6 @@
 import PagedJsWrapper from './components/PagedJsWrapper.vue';
 import EditorPanel from './components/editor/EditorPanel.vue';
 import ElementPopup from './components/ElementPopup.vue';
-import PreviewLoader from './components/PreviewLoader.vue';
 import { onMounted, ref, watch, computed, provide } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
 import Coloris from '@melloware/coloris';
@@ -17,7 +16,7 @@ provide('activeTab', activeTab);
 
 let savedScrollPercentage = 0;
 const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
-const isTransitioning = ref(false);
+let isTransitioning = false;
 
 const activeFrame = computed(() => {
   return currentFrameIndex.value === 1
@@ -26,8 +25,8 @@ const activeFrame = computed(() => {
 });
 
 const renderPreview = async (shouldReloadFromFile = false) => {
-  if (isTransitioning.value) return;
-  isTransitioning.value = true;
+  if (isTransitioning) return;
+  isTransitioning = true;
 
   // Determine which iframe is currently visible and which to render to
   const visibleFrame =
@@ -36,7 +35,7 @@ const renderPreview = async (shouldReloadFromFile = false) => {
     currentFrameIndex.value === 1 ? previewFrame2.value : previewFrame1.value;
 
   if (!hiddenFrame) {
-    isTransitioning.value = false;
+    isTransitioning = false;
     return;
   }
 
@@ -113,7 +112,7 @@ const renderPreview = async (shouldReloadFromFile = false) => {
 
           // Swap current frame
           currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1;
-          isTransitioning.value = false;
+          isTransitioning = false;
         }, 200); // Match CSS transition duration
       }, 50); // Small delay to ensure scroll is set
     }, 200); // Wait for PagedJS
@@ -148,8 +147,6 @@ onMounted(() => renderPreview(true));
     :class="{ shifted: activeTab.length > 0 }"
   ></iframe>
 
-  <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
-
   <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
 </template>
 

src/components/PreviewLoader.vue

@@ -1,49 +0,0 @@
-<template>
-  <div v-if="isLoading" class="preview-loader" :class="{ shifted }">
-    <div class="spinner"></div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  isLoading: {
-    type: Boolean,
-    required: true,
-  },
-  shifted: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-
-<style scoped>
-.preview-loader {
-  position: fixed;
-  top: 2rem;
-  right: 2rem;
-  z-index: 1000;
-  pointer-events: none;
-  transition: all 0.2s ease-in-out var(--curve);
-}
-
-.spinner {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  display: inline-block;
-  border-top: 3px solid #000;
-  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>