Made harsh loading/error experience friendlier

frontend/src/components/blankstate.svelte

@@ -1,14 +1,25 @@
 <script>
+  import Icon from './icon.svelte';
+
+  export let title = '';
   export let label = 'No items';
   export let image = '/empty.svg';
+  export let icon = '';
   export let pale = true;
   export let big = false;
 </script>
 
 <div class="blankstate" class:pale class:big>
   <div class="content">
-    <img src={image} alt="" />
+    {#if icon}
+      <Icon name={icon} />
+    {:else if image}
+      <img src={image} alt="" />
+    {/if}
+
+    <p class="title">{title}</p>
     <p>{label}</p>
+
     <slot />
   </div>
 </div>
@@ -27,12 +38,20 @@
     height: 150px;
     width: auto;
   }
+  .content :global(svg) {
+    height: 40px;
+    width: auto;
+  }
 
   p {
     margin: 2.85rem 0;
     font-size: 1.25rem;
     line-height: 1.25rem;
   }
+  p.title {
+    font-weight: 700;
+    margin-bottom: -1.85rem;
+  }
 
   .blankstate :global(.btn) {
     font-size: 1.35rem;
@@ -48,7 +67,7 @@
     filter: grayscale(1);
     opacity: 0.4;
   }
-  .pale p {
+  .pale {
     color: #777;
   }
 </style>

frontend/src/components/grid.svelte

@@ -1,4 +1,5 @@
 <script>
+  import BlankState from './blankstate.svelte';
   import GridItems from './grid-items.svelte';
 
   export let columns = [];
@@ -12,7 +13,9 @@
   export let canSelect = true;
   export let canRemoveItems = false;
   export let inputsValid = false;
-// export let actions = [];
+  export let errorTitle = '';
+  export let errorDescription = '';
+  export let busy = false;
 </script>
 
 <div class="grid">
@@ -27,45 +30,51 @@
     </div>
   {/if} -->
 
-  <table>
-    {#if showHeaders && columns.some(col => col.title)}
-      <thead>
-        <tr>
-          {#if !hideChildrenToggles}
-            <th class="has-toggle"></th>
-          {/if}
+  {#if busy}
+    <BlankState label={(busy === true) ? 'Loading…' : busy} icon="loading" />
+  {:else if errorTitle || errorDescription}
+    <BlankState title={errorTitle} label={errorDescription} icon="!" />
+  {:else}
+    <table>
+      {#if showHeaders && columns.some(col => col.title)}
+        <thead>
+          <tr>
+            {#if !hideChildrenToggles}
+              <th class="has-toggle"></th>
+            {/if}
 
-          <th class="has-icon"></th>
+            <th class="has-icon"></th>
 
-          {#each columns as column}
-            <th scope="col">{column.title || ''}</th>
-          {/each}
+            {#each columns as column}
+              <th scope="col">{column.title || ''}</th>
+            {/each}
 
-          {#if canRemoveItems}
-            <th class="has-button"></th>
-          {/if}
-        </tr>
-      </thead>
-    {/if}
+            {#if canRemoveItems}
+              <th class="has-button"></th>
+            {/if}
+          </tr>
+        </thead>
+      {/if}
 
-    <tbody>
-      <GridItems
-        {items}
-        {columns}
-        {key}
-        {striped}
-        {canSelect}
-        {canRemoveItems}
-        {hideObjectIndicators}
-        {hideChildrenToggles}
-        bind:activePath
-        bind:inputsValid
-        on:select
-        on:trigger
-        on:removeItem
-      />
-    </tbody>
-  </table>
+      <tbody>
+        <GridItems
+          {items}
+          {columns}
+          {key}
+          {striped}
+          {canSelect}
+          {canRemoveItems}
+          {hideObjectIndicators}
+          {hideChildrenToggles}
+          bind:activePath
+          bind:inputsValid
+          on:select
+          on:trigger
+          on:removeItem
+        />
+      </tbody>
+    </table>
+  {/if}
 </div>
 
 <style>
@@ -75,15 +84,6 @@
     background-color: #fff;
   }
 
-  /* .actions {
-    margin-bottom: 0.5rem;
-    padding: 0.5rem;
-    border-bottom: 1px solid #ccc;
-  }
-  .actions button {
-    margin-right: 0.2rem;
-  } */
-
   table {
     border-collapse: collapse;
     width: 100%;
@@ -99,7 +99,20 @@
     padding: 2px;
   }
 
+  .grid :global(.blankstate) {
+    height: 100%;
+    padding: 1rem;
+  }
+
   /* tfoot button {
     margin-top: 0.5rem;
+  }
+  .actions {
+    margin-bottom: 0.5rem;
+    padding: 0.5rem;
+    border-bottom: 1px solid #ccc;
+  }
+  .actions button {
+    margin-right: 0.2rem;
   } */
 </style>

frontend/src/components/icon.svelte

@@ -14,9 +14,19 @@
     width: auto;
     vertical-align: bottom;
   }
+
+  @keyframes spinning {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  svg.spinning {
+    animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  }
 </style>
 
-<svg xmlns="http://www.w3.org/2000/svg"
+<svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -24,7 +34,9 @@
   stroke="currentColor"
   stroke-width="2"
   stroke-linecap="round"
-  stroke-linejoin="round">
+  stroke-linejoin="round"
+  class:spinning={name === 'loading'}
+>
   {#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>
   {:else if name === 'chev-l'}
@@ -126,5 +138,9 @@
     <path d="M18 20V10M12 20V4M6 20v-6" />
   {:else if name === '?'}
     <circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line>
+  {:else if name === '!'}
+    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01" />
+  {:else if name === 'loading'}
+    <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
   {/if}
 </svg>

frontend/src/components/objectgrid.svelte

@@ -8,6 +8,9 @@
   export let activePath = [];
   export let hideObjectIndicators = false;
   export let getRootMenu = () => undefined;
+  export let errorTitle = '';
+  export let errorDescription = '';
+  export let busy = false;
 
   const columns = [
     { key: 'key', label: 'Key' },
@@ -116,4 +119,7 @@
   {columns}
   {items}
   {hideObjectIndicators}
+  {errorTitle}
+  {errorDescription}
+  {busy}
 />