[pdm-devel] [PATCH datacenter-manager v2 1/1] ui: remote tasks: add loading animation for running tasks

[Dominik Csapak]

when there is no endtime and the status is either empty or "RUNNING"
(for PVE), render a spinning loading icon, like we do in the ExtJS UI.

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
changes from v1:
* use justifycontent instead of 2 flex spacers
* move match one level up

 ui/src/remotes/tasks.rs | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui/src/remotes/tasks.rs b/ui/src/remotes/tasks.rs
index 99bb243..afd752e 100644
--- a/ui/src/remotes/tasks.rs
+++ b/ui/src/remotes/tasks.rs
@@ -15,12 +15,12 @@ use proxmox_yew_comp::{
     TaskViewer, Tasks,
 };
 use pwt::{
-    css::FlexFit,
+    css::{FlexFit, JustifyContent},
     props::{ContainerBuilder, WidgetBuilder},
     tr,
     widget::{
         data_table::{DataTableColumn, DataTableHeader},
-        Column,
+        Column, Fa, Row,
     },
 };
 
@@ -47,7 +47,10 @@ fn columns() -> Rc<Vec<DataTableHeader<TaskListItem>>> {
             .width("130px")
             .render(|item: &TaskListItem| match item.endtime {
                 Some(endtime) => render_epoch_short(endtime).into(),
-                None => html! {},
+                None => Row::new()
+                    .class(JustifyContent::Center)
+                    .with_child(Fa::new("").class("pwt-loading-icon"))
+                    .into(),
             })
             .into(),
         DataTableColumn::new(tr!("User name"))
@@ -89,9 +92,12 @@ fn columns() -> Rc<Vec<DataTableHeader<TaskListItem>>> {
             .into(),
         DataTableColumn::new(tr!("Status"))
             .width("minmax(200px, 1fr)")
-            .render(|item: &TaskListItem| {
-                let text = item.status.as_deref().unwrap_or("");
-                html! {text}
+            .render(|item: &TaskListItem| match item.status.as_deref() {
+                Some("" | "RUNNING") | None => Row::new()
+                    .class(JustifyContent::Center)
+                    .with_child(Fa::new("").class("pwt-loading-icon"))
+                    .into(),
+                Some(text) => html! {text},
             })
             .into(),
     ])
-- 
2.39.5