From a99fcd2152ee146bdb9832ba5af3c107c1849e41 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Thu, 27 Mar 2025 00:04:41 +0100
Subject: [PATCH] Add spinner while printing image

---
 showbits-thermal-printer-ui/src/AppPhoto.vue | 23 +++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/AppPhoto.vue b/showbits-thermal-printer-ui/src/AppPhoto.vue
index 4a1bb3d..fd52684 100644
--- a/showbits-thermal-printer-ui/src/AppPhoto.vue
+++ b/showbits-thermal-printer-ui/src/AppPhoto.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RiLoader4Fill } from "@remixicon/vue";
 import { computed, onMounted, ref, useTemplateRef } from "vue";
 import CPhotoButtonFlip from "./components/CPhotoButtonFlip.vue";
 import CPhotoButtonGallery from "./components/CPhotoButtonGallery.vue";
@@ -113,7 +114,9 @@ onMounted(async () => {
       @click="onFlip"
     />
   </div>
-  <div class="cover" :class="{ hidden: !covered }"></div>
+  <div class="cover" :class="{ hidden: !covered }">
+    <RiLoader4Fill size="48px" />
+  </div>
 </template>
 
 <style>
@@ -150,11 +153,25 @@ video.mirrored {
   width: 100%;
   height: 100%;
   background-color: white;
-  transition: background-color 100ms linear;
+  transition: opacity 100ms linear;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .cover.hidden {
-  background-color: transparent;
+  opacity: 0;
   pointer-events: none;
 }
+
+.cover svg {
+  animation: spinner 2s linear infinite;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>