commit 6d5728ef9e4941d407ef97185201a09ec3bb7d72
author Yash Chaturvedi <yash.chaturvedi@linaro.org> Mon Dec 19 10:27:19 2022 +0530
committer Yash Chaturvedi <yash.chaturvedi@linaro.org> Mon Dec 19 15:36:27 2022 +0530
tree 99b713b04d5371c00ee467946d8d129a8395d132
parent ea1eefb5b20e3d7350f7d580f60e137e409ba76a

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