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

diff --git a/src/tasks.rs b/src/tasks.rs
index 499f5b9..1d3b0bf 100644
--- a/src/tasks.rs
+++ b/src/tasks.rs
@@ -17,7 +17,7 @@ use pwt::state::{PersistentState, Selection, Store};
 use pwt::widget::data_table::{
     DataTable, DataTableColumn, DataTableHeader, DataTableRowRenderCallback,
 };
-use pwt::widget::{Button, Column, Toolbar};
+use pwt::widget::{Button, Column, Fa, Row, Toolbar};
 
 use crate::utils::{format_upid, render_epoch_short};
 
@@ -122,7 +122,11 @@ impl ProxmoxTasks {
                     .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"))
@@ -139,7 +143,14 @@ impl ProxmoxTasks {
                     .width("200px")
                     .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