Add spinner to waiting messages

ssciwr · Jul 25, 2024 · 9b8f97f · 9b8f97f
1 parent d8a36d1
commit 9b8f97f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/components/EasyDBDetailView.svelte b/src/components/EasyDBDetailView.svelte
@@ -4,11 +4,13 @@
   import { maskObj } from "../lib/easydbHelpers";
   import { appLanguageStore, dataLanguagesStore, easydbInstanceStore, easydbInstanceDataPromiseStore, uuidStore } from "../lib/stores";
 
-  import AssetViewer from "./logic/AssetViewer.svelte";
-  import RecursiveEasyDbDetailView from "./logic/RecursiveEasyDBDetailView.svelte";
   import { A } from "flowbite-svelte";
   import { ArrowLeftOutline } from "flowbite-svelte-icons";
 
+  import AssetViewer from "./logic/AssetViewer.svelte";
+  import RecursiveEasyDbDetailView from "./logic/RecursiveEasyDBDetailView.svelte";
+  import Waiting from "./utils/Waiting.svelte";
+
   export let uuid = "";
   export let appLanguage = "de-DE";
   export let dataLanguages = ["de-DE", "en-US"];
@@ -29,10 +31,14 @@
 </script>
 
 {#await $easydbInstanceDataPromiseStore }
-  Accessing the EasyDB instance...
+  <Waiting>
+    Accessing the EasyDB instance...
+  </Waiting>
 {:then}
   {#await easydb_api_object($uuidStore.at(-1), mask) }
-    Waiting for API response...
+    <Waiting>
+      Waiting for API response...
+    </Waiting>
   {:then data }
     {#if $uuidStore.length > 1}
       <A on:click={() => { uuidStore.update((existing) => existing.slice(0, -1)); }}>

diff --git a/src/components/logic/RecursiveEasyDBDetailView.svelte b/src/components/logic/RecursiveEasyDBDetailView.svelte
@@ -1,5 +1,7 @@
 <script>
   import { fieldData, hasReverseSubData, hasSubData, linkedSubData, maskObj, reverseLinkedSubData, splitterTitle } from "../../lib/easydbHelpers";
+  import { easydb_api_object } from "../../lib/apiaccess";
+
   import { Card, Li, List, P } from "flowbite-svelte";
   
   import CustomSplitterDispatch from "./CustomSplitterDispatch.svelte";
@@ -13,7 +15,7 @@
   import TabItem from "../splitter/TabItem.svelte";
   import FieldLabel from "../fields/FieldLabel.svelte";
   import NotImplemented from "../utils/NotImplemented.svelte";
-  import { easydb_api_object } from "../../lib/apiaccess";
+  import Waiting from "../utils/Waiting.svelte";
 
   export let fields;
   export let data;
@@ -165,7 +167,9 @@
       {:else if firstField.inline === "text" }
         <Card horizontal class="max-w-full block">
           {#await loadAdditionalUUID(firstField)}
-            Loading...
+            <Waiting>
+              Accessing API...
+            </Waiting>
           {:then additionalData}
             <svelte:self fields={maskObj(additionalData).fields} data={additionalData} table={maskObj(additionalData).table_name_hint} condensed={condensed} output="text"/>
           {/await}

diff --git a/src/components/utils/Waiting.svelte b/src/components/utils/Waiting.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { P, Spinner } from "flowbite-svelte";
+</script>
+
+<div class="easydb-waiting flex justify-center">
+  <div>
+    <P>
+      <Spinner class="h-12 w-12"/>
+    </P>
+    <P class="pt-4">
+      <slot />
+    </P>
+  </div>
+</div>