pagedJS reload preview : decrease timeout

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