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
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);
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;
}
}
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>
