Use new loading interface for collection indexes

frontend/src/components/icon.svelte

@@ -1,5 +1,10 @@
 <script>
   export let name = '';
+  export let spin = false;
+
+  if (name === 'loading') {
+    spin = true;
+  }
 </script>
 
 <style>
@@ -35,7 +40,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
-  class:spinning={name === 'loading'}
+  class:spinning={spin}
 >
   {#if name === 'radio'}
     <circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>

frontend/src/lib/stores/hosttree.js

@@ -162,12 +162,10 @@ async function refresh() {
             };
 
             collection.getIndexes = async function() {
-              const progress = startProgress(`Retrieving indexes of "${collKey}"…`);
               collection.indexes = [];
               const { indexes, error } = await GetIndexes(hostKey, dbKey, collKey);
 
               if (error) {
-                progress.end();
                 return error;
               }
 
@@ -187,8 +185,6 @@ async function refresh() {
 
                 collection.indexes.push(index);
               }
-
-              progress.end();
             };
 
             collection.getIndexByName = function(indesName) {

frontend/src/organisms/connection/collection/indexes.svelte

@@ -8,9 +8,12 @@
   let activePath = [];
   let _indexes = [];
   let error = '';
+  let busy = false;
 
   async function refresh() {
+    busy = 'Fetching indexes…';
     error = await collection.getIndexes();
+
     if (!error) {
       _indexes = collection.indexes.map(idx => {
         return {
@@ -22,6 +25,8 @@
         };
       });
     }
+
+    busy = false;
   }
 
   async function createIndex() {
@@ -56,12 +61,13 @@
       errorTitle={error ? 'Error while getting indexes' : ''}
       errorDescription={error}
       bind:activePath
+      {busy}
     />
   </div>
 
   <div class="actions">
     <button class="btn" on:click={refresh}>
-      <Icon name="reload" /> Reload
+      <Icon name="reload" spin={busy} /> Reload
     </button>
     <button class="btn" on:click={createIndex}>
       <Icon name="+" /> Create index…