Made harsh loading/error experience friendlier

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

@@ -46,8 +46,7 @@
       return;
     }
 
-    querying = true;
-    const progress = startProgress('Performing query…');
+    querying = `Querying ${collection.key}…`;
     activePath = [];
     const newResult = await FindItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
 
@@ -57,7 +56,6 @@
       submittedForm = deepClone(form);
     }
 
-    progress.end();
     resetFocus();
     querying = false;
   }
@@ -231,6 +229,9 @@
             hideObjectIndicators={$views[collection.viewKey]?.hideObjectIndicators}
             bind:activePath
             on:trigger={e => openJson(e.detail?.index)}
+            errorTitle={result.errorTitle}
+            errorDescription={result.errorDescription}
+            busy={querying}
           />
         {:else}
           <Grid
@@ -242,6 +243,9 @@
             items={result.results ? result.results.map(r => EJSON.deserialize(r)) : []}
             bind:activePath
             on:trigger={e => openJson(e.detail?.index)}
+            errorTitle={result.errorTitle}
+            errorDescription={result.errorDescription}
+            busy={querying}
           />
         {/if}
       {/key}

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

@@ -7,18 +7,21 @@
 
   let activePath = [];
   let _indexes = [];
+  let error = '';
 
   async function refresh() {
-    await collection.getIndexes();
-    _indexes = collection.indexes.map(idx => {
-      return {
-        name: idx.name,
-        background: idx.background || false,
-        unique: idx.unique || false,
-        sparse: idx.sparse || false,
-        model: idx.model,
-      };
-    });
+    error = await collection.getIndexes();
+    if (!error) {
+      _indexes = collection.indexes.map(idx => {
+        return {
+          name: idx.name,
+          background: idx.background || false,
+          unique: idx.unique || false,
+          sparse: idx.sparse || false,
+          model: idx.model,
+        };
+      });
+    }
   }
 
   async function createIndex() {
@@ -50,6 +53,8 @@
       key="name"
       data={_indexes}
       getRootMenu={(_, idx) => [ { label: 'Drop this index', fn: () => dropIndex(idx.name) } ]}
+      errorTitle={error ? 'Error while getting indexes' : ''}
+      errorDescription={error}
       bind:activePath
     />
   </div>

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

@@ -18,11 +18,16 @@
   <!-- <CodeExample code="db.stats()" /> -->
 
   <div class="grid">
-    <ObjectGrid data={collection.stats} />
+    <ObjectGrid
+      data={collection.stats}
+      errorTitle={collection.statsError ? 'Error fetching collection stats' : ''}
+      errorDescription={collection.statsError}
+      busy={!collection.stats && !collection.statsError && `Fetching stats for ${collection.key}…`}
+    />
   </div>
 
   <div class="buttons">
-    <button class="btn secondary" on:click={copy}>
+    <button class="btn secondary" on:click={copy} disabled={!collection.stats}>
       <Icon name={copySucceeded ? 'check' : 'clipboard'} />
       Copy JSON
     </button>

frontend/src/organisms/connection/database/stats.svelte

@@ -18,11 +18,16 @@
   <!-- <CodeExample code="db.stats()" /> -->
 
   <div class="grid">
-    <ObjectGrid data={database.stats} />
+    <ObjectGrid
+      data={database.stats}
+      errorTitle={database.statsError ? 'Error fetching database stats' : ''}
+      errorDescription={database.statsError}
+      busy={!database.stats && !database.statsError && `Fetching stats for ${database.key}…`}
+    />
   </div>
 
   <div class="buttons">
-    <button class="btn secondary" on:click={copy}>
+    <button class="btn secondary" on:click={copy} disabled={!database.stats}>
       <Icon name={copySucceeded ? 'check' : 'clipboard'} />
       Copy JSON
     </button>

frontend/src/organisms/connection/host/status.svelte

@@ -18,11 +18,16 @@
   <!-- <CodeExample code="db.stats()" /> -->
 
   <div class="grid">
-    <ObjectGrid data={host.status} />
+    <ObjectGrid
+      data={host.status || {}}
+      errorTitle={host.statusError ? 'Error fetching server status' : ''}
+      errorDescription={host.statusError}
+      busy={!host.status && !host.statusError && 'Fetching server status…'}
+    />
   </div>
 
   <div class="buttons">
-    <button class="btn secondary" on:click={copy}>
+    <button class="btn secondary" on:click={copy} disabled={!host.status}>
       <Icon name={copySucceeded ? 'check' : 'clipboard'} />
       Copy JSON
     </button>

frontend/src/organisms/connection/host/systeminfo.svelte

@@ -18,11 +18,16 @@
   <!-- <CodeExample code="db.stats()" /> -->
 
   <div class="grid">
-    <ObjectGrid data={host.systemInfo} />
+    <ObjectGrid
+      data={host.systemInfo}
+      errorTitle={host.systemInfoError ? 'Error fetching system info' : ''}
+      errorDescription={host.systemInfoError}
+      busy={!host.systemInfo && !host.systemInfoError && 'Fetching system info…'}
+    />
   </div>
 
   <div class="buttons">
-    <button class="btn secondary" on:click={copy}>
+    <button class="btn secondary" on:click={copy} disabled={!host.systemInfo}>
       <Icon name={copySucceeded ? 'check' : 'clipboard'} />
       Copy JSON
     </button>