From 881d48ec00a35a013480be36b28e0e8bf80321cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 18 Dec 2022 14:02:57 +0100
Subject: [PATCH] fix: centered spinner on image previews

---
 webui/src/components/display/BlobPreview.svelte |  2 +-
 webui/src/components/utils/Spinner.svelte       | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte
index f269eae..2cf8827 100644
--- a/webui/src/components/display/BlobPreview.svelte
+++ b/webui/src/components/display/BlobPreview.svelte
@@ -108,7 +108,7 @@
       <div class="image" class:loaded={imageLoaded == address || !handled}>
         {#if handled && imageLoaded != address}
           <div class="spinner">
-            <Spinner centered />
+            <Spinner centered="absolute" />
           </div>
         {/if}
         <img
diff --git a/webui/src/components/utils/Spinner.svelte b/webui/src/components/utils/Spinner.svelte
index b0782aa..39ea53e 100644
--- a/webui/src/components/utils/Spinner.svelte
+++ b/webui/src/components/utils/Spinner.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-  export let centered = false;
+  export let centered: boolean | string = false;
 </script>
 
-<div class="spinner lds-ripple" class:centered>
+<div
+  class="spinner lds-ripple"
+  class:centered={Boolean(centered)}
+  class:absolute-centered={centered == "absolute"}
+>
   <div />
   <div />
 </div>
@@ -14,6 +18,13 @@
     transform: translateX(-50%);
   }
 
+  .spinner.absolute-centered {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   .lds-ripple {
     display: inline-block;
     position: relative;