[pdm-devel] [PATCH datacenter-manager 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>
---
 ui/src/remotes/tasks.rs | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/ui/src/remotes/tasks.rs b/ui/src/remotes/tasks.rs
index 99bb243..ef9a8bf 100644
--- a/ui/src/remotes/tasks.rs
+++ b/ui/src/remotes/tasks.rs
@@ -20,7 +20,7 @@ use pwt::{
     tr,
     widget::{
         data_table::{DataTableColumn, DataTableHeader},
-        Column,
+        Column, Fa, Row,
     },
 };
 
@@ -47,7 +47,11 @@ 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()
+                    .with_flex_spacer()
+                    .with_child(Fa::new("").class("pwt-loading-icon"))
+                    .with_flex_spacer()
+                    .into(),
             })
             .into(),
         DataTableColumn::new(tr!("User name"))
@@ -91,7 +95,14 @@ fn columns() -> Rc<Vec<DataTableHeader<TaskListItem>>> {
             .width("minmax(200px, 1fr)")
             .render(|item: &TaskListItem| {
                 let text = item.status.as_deref().unwrap_or("");
-                html! {text}
+                match text {
+                    "" | "RUNNING" => Row::new()
+                        .with_flex_spacer()
+                        .with_child(Fa::new("").class("pwt-loading-icon"))
+                        .with_flex_spacer()
+                        .into(),
+                    text => html! {text},
+                }
             })
             .into(),
     ])
-- 
2.39.5