UI: Show a 'loading' chip when tasks are being loaded

Currently, 'No Tasks' is shown in the tasks summary section when the
API to fetch the tasks is in progress. Show a 'loading' chip instead.

https://imgur.com/a/hSTtmRx

Change-Id: Ie89cc9276ac4c5e3f47aec3b0831636feb781cdc

gr-task-plugin/gr-task-chip_html.js

diff --git a/gr-task-plugin/gr-task-chip_html.js b/gr-task-plugin/gr-task-chip_html.js
index 68e1d0c..a8e55d0 100644
--- a/gr-task-plugin/gr-task-chip_html.js
+++ b/gr-task-plugin/gr-task-chip_html.js
@@ -35,6 +35,17 @@
       position: relative;
       top: 2px;
     }
+    .taskSummaryChip.loading {
+      border-color: var(--gray-foreground);
+      background: var(--gray-background);
+    }
+    .taskSummaryChip.loading:hover {
+      background: var(--gray-background-hover);
+      box-shadow: var(--elevation-level-1);
+    }
+    .taskSummaryChip.loading:focus-within {
+      background: var(--gray-background-focus);
+    }
     .taskSummaryChip.success {
       border-color: var(--success-foreground);
       background: var(--success-background);

gr-task-plugin/gr-task-summary.js

diff --git a/gr-task-plugin/gr-task-summary.js b/gr-task-plugin/gr-task-summary.js
index 1e23ebe..4fa8ea8 100644
--- a/gr-task-plugin/gr-task-summary.js
+++ b/gr-task-plugin/gr-task-summary.js
@@ -64,6 +64,11 @@
         notify: true,
         value: 0,
       },
+
+      is_loading: {
+        type: Boolean,
+        value: true,
+      },
     };
   }
 
@@ -77,13 +82,19 @@
       this.waiting_count = e.detail.waiting_count;
       this.duplicate_count = e.detail.duplicate_count;
       this.pass_count = e.detail.pass_count;
+      this.is_loading = false;
     });
   }
 
-  _can_show_chips(ready_count, fail_count, invalid_count,
-      waiting_count, duplicate_count, pass_count) {
-    return ready_count || fail_count || invalid_count ||
-      waiting_count || duplicate_count || pass_count;
+  _show_no_tasks(is_loading, ready_count,
+      fail_count, invalid_count,
+      waiting_count, duplicate_count,
+      pass_count) {
+    if (is_loading || ready_count || fail_count || invalid_count ||
+      waiting_count || duplicate_count || pass_count) {
+      return false;
+    }
+    return true;
   }
 }
 

gr-task-plugin/gr-task-summary_html.js

diff --git a/gr-task-plugin/gr-task-summary_html.js b/gr-task-plugin/gr-task-summary_html.js
index 2e567c3..6fdb42f 100644
--- a/gr-task-plugin/gr-task-summary_html.js
+++ b/gr-task-plugin/gr-task-summary_html.js
@@ -71,16 +71,15 @@
       <tr>
         <td class="key">Tasks</td>
         <td class="value">
-          <template is="dom-if" if="[[_can_show_chips(ready_count, fail_count, invalid_count, waiting_count, duplicate_count, pass_count)]]">
-            <gr-task-chip chip_style="fail" hidden$="[[!fail_count]]">[[fail_count]] blocked</gr-task-chip>
-            <gr-task-chip chip_style="invalid" hidden$="[[!invalid_count]]">[[invalid_count]] invalid</gr-task-chip>
-            <gr-task-chip chip_style="duplicate" hidden$="[[!duplicate_count]]">[[duplicate_count]] duplicate</gr-task-chip>
-            <gr-task-chip chip_style="ready" hidden$="[[!ready_count]]">[[ready_count]] ready</gr-task-chip>
-            <gr-task-chip chip_style="waiting" hidden$="[[!waiting_count]]">[[waiting_count]] waiting</gr-task-chip>
-            <gr-task-chip chip_style="success" hidden$="[[!pass_count]]">[[pass_count]] passed</gr-task-chip>
-          </template>
-          <template is="dom-if" if="[[!_can_show_chips(ready_count, fail_count, invalid_count, waiting_count, duplicate_count, pass_count)]]">
-              <td>No tasks</td>
+          <gr-task-chip chip_style="loading" hidden$="[[!is_loading]]">loading...</gr-task-chip>
+          <gr-task-chip chip_style="fail" hidden$="[[!fail_count]]">[[fail_count]] blocked</gr-task-chip>
+          <gr-task-chip chip_style="invalid" hidden$="[[!invalid_count]]">[[invalid_count]] invalid</gr-task-chip>
+          <gr-task-chip chip_style="duplicate" hidden$="[[!duplicate_count]]">[[duplicate_count]] duplicate</gr-task-chip>
+          <gr-task-chip chip_style="ready" hidden$="[[!ready_count]]">[[ready_count]] ready</gr-task-chip>
+          <gr-task-chip chip_style="waiting" hidden$="[[!waiting_count]]">[[waiting_count]] waiting</gr-task-chip>
+          <gr-task-chip chip_style="success" hidden$="[[!pass_count]]">[[pass_count]] passed</gr-task-chip>
+          <template is="dom-if" if="[[_show_no_tasks(is_loading, ready_count, fail_count, invalid_count, waiting_count, duplicate_count, pass_count)]]">
+            <td>No tasks</td>
           </template>
         </td>
       </tr>