Update task plugin ui to show loading indicator while fetching tasks

Before this change, user does not get any feedback while the tasks are
loading.
Add an indicator to let the user know about the pending state of task
fetch process.

Change-Id: I6c001a0f724dfa5593921f39c10a574bd1c3716a

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

diff --git a/gr-task-plugin/gr-task-plugin.js b/gr-task-plugin/gr-task-plugin.js
index 3efcc2b..aa0e5f3 100644
--- a/gr-task-plugin/gr-task-plugin.js
+++ b/gr-task-plugin/gr-task-plugin.js
@@ -82,6 +82,11 @@
         notify: true,
         value: 0,
       },
+
+      _isPending: {
+        type: Boolean,
+        value: true,
+      },
     };
   }
 
@@ -95,15 +100,21 @@
     this._getTasks();
   }
 
+  _is_hidden(_isPending, _tasks) {
+    return (!_isPending && !_tasks.length);
+  }
+
   _getTasks() {
     if (!this.change) {
       return;
     }
 
+    this._isPending = true;
     const endpoint =
         `/changes/?q=change:${this.change._number}&--task--applicable`;
 
     return this.plugin.restApi().get(endpoint).then(response => {
+      this._isPending = false;
       if (response && response.length === 1) {
         const cinfo = response[0];
         if (cinfo.plugins) {
@@ -115,6 +126,8 @@
           }
         }
       }
+    }).catch(e => {
+      this._isPending = false;
     });
   }
 

gr-task-plugin/gr-task-plugin_html.js

diff --git a/gr-task-plugin/gr-task-plugin_html.js b/gr-task-plugin/gr-task-plugin_html.js
index f24c6bd..60ed70b 100644
--- a/gr-task-plugin/gr-task-plugin_html.js
+++ b/gr-task-plugin/gr-task-plugin_html.js
@@ -70,9 +70,16 @@
       --iron-icon-width: 18px;
     }
     .no-margins { margin: 0 0 0 0; }
+    .task-list-item {
+      display: flex;
+      align-items: center;
+      column-gap: 1em;
+      padding-top: 12px;
+      padding-left: 12px;
+    }
 </style>
 
-<div id="tasks" hidden$="[[!_tasks.length]]">
+<div id="tasks" hidden$="[[_is_hidden(_isPending, _tasks)]]">
   <paper-tabs id="secondaryTabs" selected="0">
     <paper-tab
       data-name$="Tasks"
@@ -82,7 +89,8 @@
     </paper-tab>
   </paper-tabs>
   <section class="TasksList">
-    <div style="display: flex; align-items: center; column-gap: 1em; padding-top: 12px; padding-left: 12px">
+    <div hidden$="[[!_isPending]]" class="task-list-item">Loading...</div>
+    <div hidden$="[[_isPending]]" class="task-list-item">
     <template is="dom-if" if="[[_is_show_all(_show_all)]]">
       <p> All ([[_all_count]]) |
         <span