[ui] spinner explicit centering

webui/src/App.svelte

@@ -77,9 +77,5 @@
 
   .spinner {
     font-size: 2em;
-
-    position: relative;
-    left: 50%;
-    transform: translateX(-50%);
   }
 </style>

webui/src/components/Inspect.svelte

@@ -177,7 +177,7 @@
       {#if $entity}
         <UpObject banner {address} on:resolved />
       {:else}
-        <Spinner />
+        <Spinner centered />
       {/if}
     </h2>
     {#if groups?.length}
@@ -242,7 +242,7 @@
         {/if}
       </div>
     {:else}
-      <Spinner />
+      <Spinner centered />
     {/if}
   {:else}
     <div class="error">

webui/src/components/display/blobs/TextViewer.svelte

@@ -46,7 +46,7 @@
   </header>
   <div class="text" class:markdown={mode === "markdown"}>
     {#await textContent}
-      <Spinner />
+      <Spinner centered />
     {:then text}
       {#if mode === "markdown"}
         {@html text}

webui/src/components/utils/Spinner.svelte

@@ -1,9 +1,19 @@
-<div class="spinner lds-ripple">
+<script lang="ts">
+  export let centered = false;
+</script>
+
+<div class="spinner lds-ripple" class:centered>
   <div />
   <div />
 </div>
 
 <style>
+  .spinner.centered {
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
   .lds-ripple {
     display: inline-block;
     position: relative;
@@ -22,8 +32,8 @@
   }
   @keyframes lds-ripple {
     0% {
-      top: .5em;
+      top: 0.5em;
-      left: .5em;
+      left: 0.5em;
       width: 0;
       height: 0;
       opacity: 1;

webui/src/components/widgets/gallery/Thumbnail.svelte

@@ -16,7 +16,7 @@
     <div class="image" class:loaded={loaded == address || !handled}>
       {#if handled && loaded != address}
         <div class="spinner">
-          <Spinner />
+          <Spinner centered />
         </div>
       {/if}
       {#if handled}

webui/src/views/Home.svelte

@@ -50,7 +50,7 @@
   <section class="roots">
     <h2>Roots</h2>
     {#await roots}
-      <Spinner />
+      <Spinner centered />
     {:then data}
       <ul>
         {#each data as root}
@@ -81,7 +81,7 @@
   <section class="latest">
     <h2>Most recently added files</h2>
     {#await latestFiles}
-      <Spinner />
+      <Spinner centered />
     {:then data}
       <table>
         {#each data as file}

webui/src/views/Search.svelte

@@ -68,7 +68,7 @@
       <section class="objects">
         {#await objects}
           <h2>Objects</h2>
-          <Spinner />
+          <Spinner centered />
         {:then objects}
           {#if objects.length}
             <h2>Objects</h2>
@@ -101,7 +101,7 @@
       </section>
     {:else}
       <div class="global">
-        <Spinner />
+        <Spinner centered />
       </div>
     {/if}
   {:else}