From fd1340f9e42a8754c4e2b54bad086745b7663a9a Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Fri, 22 Dec 2023 17:05:32 +0100
Subject: [PATCH] Add nice loading indicator to the host tree

---
 .../src/components/grid/grid-items.svelte     | 20 ++++++++++++++++++-
 frontend/src/components/icon.svelte           |  7 +------
 frontend/src/lib/stores/hosttree.js           | 11 ++++++++++
 .../src/organisms/connection/hosttree.svelte  | 13 ++++++++++--
 frontend/src/styles/style.css                 |  5 +++++
 5 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/grid/grid-items.svelte b/frontend/src/components/grid/grid-items.svelte
index 9c3172d..311e90a 100644
--- a/frontend/src/components/grid/grid-items.svelte
+++ b/frontend/src/components/grid/grid-items.svelte
@@ -156,6 +156,10 @@
             <Icon name={childrenOpen[item[key]] ? 'chev-d' : 'chev-r'} />
           </button>
         {/if}
+
+        {#if item.loading}
+          <span class="spinner" style:margin-left="{level * 10}px" />
+        {/if}
       </td>
     {/if}
 
@@ -234,11 +238,25 @@
     text-overflow: ellipsis;
   }
   td.has-toggle {
+    position: relative;
     width: 1.5em;
   }
+  td.has-toggle .spinner {
+    position: absolute;
+    top: 0.3em;
+    left: 0.22em;
+    width: 1em;
+    height: 1em;
+    border: 1px solid var(--primary);
+    border-radius: 50px;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    animation: .6s linear 0 spin;
+    animation-iteration-count: infinite;
+  }
   td.has-icon {
     padding: 0;
-    width: 1px;
+    width: 1.5em;
   }
   td.has-icon :global(svg) {
     width: 1em;
diff --git a/frontend/src/components/icon.svelte b/frontend/src/components/icon.svelte
index 597f460..7f314f6 100644
--- a/frontend/src/components/icon.svelte
+++ b/frontend/src/components/icon.svelte
@@ -11,11 +11,6 @@
 </script>
 
 <style>
-  @keyframes spinning {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
   svg {
     transition: transform 0.25s;
     will-change: transform;
@@ -23,7 +18,7 @@
     height: 1.2em;
   }
   svg.spinning {
-    animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   }
 
   :global(.field) svg {
diff --git a/frontend/src/lib/stores/hosttree.js b/frontend/src/lib/stores/hosttree.js
index bf1d9de..d3eee7b 100644
--- a/frontend/src/lib/stores/hosttree.js
+++ b/frontend/src/lib/stores/hosttree.js
@@ -43,6 +43,7 @@ async function refresh() {
     hostKey,
     hostDetails,
   ] of Object.entries(hosts)) {
+
     hostTree[hostKey] = hostTree[hostKey] || {};
     const host = hostTree[hostKey];
     host.key = hostKey;
@@ -50,6 +51,9 @@ async function refresh() {
     host.uri = hostDetails.uri;
 
     host.open = async function() {
+      host.loading = true;
+      set(hostTree);
+
       const {
         databases: dbNames,
         status,
@@ -88,6 +92,9 @@ async function refresh() {
         delete database.new;
 
         database.open = async function() {
+          database.loading = true;
+          set(hostTree);
+
           const { collections: collNames, stats, statsError } = await OpenDatabase(hostKey, dbKey);
           database.stats = stats;
           database.statsError = statsError;
@@ -285,6 +292,8 @@ async function refresh() {
 
           await refresh();
           windowTitle.setSegments(dbKey, host.name, 'Rolens');
+          database.loading = false;
+          set(hostTree);
         };
 
         database.dump = function() {
@@ -324,6 +333,8 @@ async function refresh() {
       }
 
       await refresh();
+      host.loading = false;
+      set(hostTree);
     };
 
     host.executeShellScript = async function(script) {
diff --git a/frontend/src/organisms/connection/hosttree.svelte b/frontend/src/organisms/connection/hosttree.svelte
index 6cc73aa..48279c6 100644
--- a/frontend/src/organisms/connection/hosttree.svelte
+++ b/frontend/src/organisms/connection/hosttree.svelte
@@ -7,20 +7,27 @@
 
 <Grid
   striped={false}
-  columns={[ { key: 'name' }, { key: 'count', right: true } ]}
+  columns={[
+    { key: 'name' },
+    { key: 'count', right: true },
+  ]}
   items={Object.values($hostTree || {}).map(host => {
     return {
       id: host.key,
       name: host.name,
+      loading: host.loading,
       icon: 'server',
+
       children: Object.values(host.databases || {})
         .sort((a, b) => a.key.localeCompare(b))
         .map(database => {
           return {
             id: database.key,
             name: database.key,
-            icon: 'db',
+            loading: database.loading,
             count: Object.keys(database.collections || {}).length || '',
+            icon: 'db',
+
             children: Object.values(database.collections)
               .sort((a, b) => a.key.localeCompare(b))
               .map(collection => {
@@ -42,6 +49,7 @@
                   ],
                 };
               }) || [],
+
             menu: [
               { label: 'Dump database (BSON via mongodump)…', fn: database.dump },
               { label: 'Drop database…', fn: database.drop },
@@ -51,6 +59,7 @@
             ],
           };
         }),
+
       menu: [
         { label: 'New database…', fn: host.newDatabase },
         { separator: true },
diff --git a/frontend/src/styles/style.css b/frontend/src/styles/style.css
index e5b642b..984d9e3 100644
--- a/frontend/src/styles/style.css
+++ b/frontend/src/styles/style.css
@@ -218,3 +218,8 @@ code,
 .flash-green {
   animation: 1s ease-out 0s 1 flashGreen;
 }
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}