From c08426068860e1577a7c56d446c4340bef2ebfb0 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 16:45:57 +0100
Subject: [PATCH] refactor: extract PreviewLoader into separate component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moves loader HTML and CSS from App.vue to dedicated PreviewLoader component for better code organization.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.vue                      | 40 ++---------------------
 src/components/PreviewLoader.vue | 55 ++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 38 deletions(-)
 create mode 100644 src/components/PreviewLoader.vue

diff --git a/src/App.vue b/src/App.vue
index 24f9cc7..1b8746a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 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';
@@ -147,9 +148,7 @@ 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>
+  <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
 
   <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
 </template>
@@ -183,39 +182,4 @@ 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>
diff --git a/src/components/PreviewLoader.vue b/src/components/PreviewLoader.vue
new file mode 100644
index 0000000..a1c43d8
--- /dev/null
+++ b/src/components/PreviewLoader.vue
@@ -0,0 +1,55 @@
+<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);
+}
+
+.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 #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>