studio-variable/geoproject-app
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: extract PreviewLoader into separate component

Browse source 
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>
This commit is contained in:
isUnknown 2025-12-05 16:45:57 +01:00
parent 9e02813d19
commit c084260688
2 changed files with 57 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/App.vue
View file

@ -2,6 +2,7 @@
import PagedJsWrapper from './components/PagedJsWrapper.vue'; import PagedJsWrapper from './components/PagedJsWrapper.vue';
import EditorPanel from './components/editor/EditorPanel.vue'; import EditorPanel from './components/editor/EditorPanel.vue';
import ElementPopup from './components/ElementPopup.vue'; import ElementPopup from './components/ElementPopup.vue';
import PreviewLoader from './components/PreviewLoader.vue';
import { onMounted, ref, watch, computed, provide } from 'vue'; import { onMounted, ref, watch, computed, provide } from 'vue';
import { useStylesheetStore } from './stores/stylesheet'; import { useStylesheetStore } from './stores/stylesheet';
import Coloris from '@melloware/coloris'; import Coloris from '@melloware/coloris';
@ -147,9 +148,7 @@ onMounted(() => renderPreview(true));
:class="{ shifted: activeTab.length > 0 }" :class="{ shifted: activeTab.length > 0 }"
></iframe> ></iframe>
<div v-if="isTransitioning" class="preview-loader" :class="{ shifted: activeTab.length > 0 }"> <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
<div class="spinner"></div>
</div>
<ElementPopup ref="elementPopup" :iframeRef="activeFrame" /> <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
</template> </template>
@ -183,39 +182,4 @@ onMounted(() => renderPreview(true));
z-index: 0; z-index: 0;
opacity: 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> </style>

55
src/components/PreviewLoader.vue Normal file
View file

@ -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>