pagedJS reload preview : decrease timeout

src/App.vue

@@ -15,7 +15,9 @@ const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
 let isTransitioning = false;
 
 const activeFrame = computed(() => {
-  return currentFrameIndex.value === 1 ? previewFrame1.value : previewFrame2.value;
+  return currentFrameIndex.value === 1
+    ? previewFrame1.value
+    : previewFrame2.value;
 });
 
 const renderPreview = async (shouldReloadFromFile = false) => {
@@ -23,8 +25,10 @@ const renderPreview = async (shouldReloadFromFile = false) => {
   isTransitioning = true;
 
   // Determine which iframe is currently visible and which to render to
-  const visibleFrame = currentFrameIndex.value === 1 ? previewFrame1.value : previewFrame2.value;
-  const hiddenFrame = currentFrameIndex.value === 1 ? previewFrame2.value : previewFrame1.value;
+  const visibleFrame =
+    currentFrameIndex.value === 1 ? previewFrame1.value : previewFrame2.value;
+  const hiddenFrame =
+    currentFrameIndex.value === 1 ? previewFrame2.value : previewFrame1.value;
 
   if (!hiddenFrame) {
     isTransitioning = false;
@@ -32,9 +36,14 @@ const renderPreview = async (shouldReloadFromFile = false) => {
   }
 
   // Save scroll position from visible frame
-  if (visibleFrame && visibleFrame.contentWindow && visibleFrame.contentDocument) {
+  if (
+    visibleFrame &&
+    visibleFrame.contentWindow &&
+    visibleFrame.contentDocument
+  ) {
     const scrollTop = visibleFrame.contentWindow.scrollY || 0;
-    const scrollHeight = visibleFrame.contentDocument.documentElement.scrollHeight;
+    const scrollHeight =
+      visibleFrame.contentDocument.documentElement.scrollHeight;
     const clientHeight = visibleFrame.contentWindow.innerHeight;
     const maxScroll = scrollHeight - clientHeight;
 
@@ -67,7 +76,8 @@ const renderPreview = async (shouldReloadFromFile = false) => {
     // Wait for PagedJS to finish rendering
     setTimeout(() => {
       // Restore scroll position
-      const scrollHeight = hiddenFrame.contentDocument.documentElement.scrollHeight;
+      const scrollHeight =
+        hiddenFrame.contentDocument.documentElement.scrollHeight;
       const clientHeight = hiddenFrame.contentWindow.innerHeight;
       const maxScroll = scrollHeight - clientHeight;
       const targetScroll = savedScrollPercentage * maxScroll;
@@ -94,9 +104,9 @@ const renderPreview = async (shouldReloadFromFile = false) => {
           // Swap current frame
           currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1;
           isTransitioning = false;
-        }, 300); // Match CSS transition duration
-      }, 100); // Small delay to ensure scroll is set
-    }, 500); // Wait for PagedJS
+        }, 100); // Match CSS transition duration
+      }, 50); // Small delay to ensure scroll is set
+    }, 200); // Wait for PagedJS
   };
 };
 
@@ -131,7 +141,7 @@ onMounted(() => renderPreview(true));
   width: 100vw;
   height: 100vh;
   border: none;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.1s ease-in-out;
 }
 
 .preview-frame:nth-of-type(1) {

src/components/ElementPopup.vue

@@ -40,7 +40,7 @@ import { useStylesheetStore } from '../stores/stylesheet';
 const stylesheetStore = useStylesheetStore();
 
 const props = defineProps({
-  iframeRef: Object
+  iframeRef: Object,
 });
 
 const visible = ref(false);
@@ -48,9 +48,7 @@ const position = ref({ x: 0, y: 0 });
 const selector = ref('');
 
 const getSelectorFromElement = (element) => {
-  return element.id
-    ? `#${element.id}`
-    : `.${element.className.split(' ')[0]}`;
+  return element.id ? `#${element.id}` : `.${element.className.split(' ')[0]}`;
 };
 
 const calculatePosition = (element) => {
@@ -115,7 +113,7 @@ const handleCssInput = (event) => {
   cssDebounceTimer = setTimeout(() => {
     const oldBlock = elementCss.value;
     stylesheetStore.content = stylesheetStore.content.replace(oldBlock, newCss);
-  }, 1000);
+  }, 500);
 };
 
 defineExpose({ handleIframeClick });

src/components/StylesheetViewer.vue

@@ -9,7 +9,10 @@
       </label>
     </div>
 
-    <pre v-if="!isEditable" class="readonly"><code class="hljs language-css" v-html="highlightedCss"></code></pre>
+    <pre
+      v-if="!isEditable"
+      class="readonly"
+    ><code class="hljs language-css" v-html="highlightedCss"></code></pre>
 
     <textarea
       v-else
@@ -47,7 +50,7 @@ const handleInput = (event) => {
 
   debounceTimer = setTimeout(() => {
     stylesheetStore.content = newContent;
-  }, 1000);
+  }, 500);
 };
 </script>
 
@@ -86,7 +89,7 @@ h3 {
   user-select: none;
 }
 
-.toggle input[type="checkbox"] {
+.toggle input[type='checkbox'] {
   position: absolute;
   opacity: 0;
   width: 0;
@@ -115,11 +118,11 @@ h3 {
   transition: transform 0.2s ease;
 }
 
-.toggle input[type="checkbox"]:checked + .toggle-switch {
+.toggle input[type='checkbox']:checked + .toggle-switch {
   background: #61afef;
 }
 
-.toggle input[type="checkbox"]:checked + .toggle-switch::after {
+.toggle input[type='checkbox']:checked + .toggle-switch::after {
   transform: translateX(20px);
 }