[pdm-devel] [PATCH yew-comp 2/2] tasks: add loading animation for running tasks

[Dietmar Maurer]

comments inline

> On 18.3.2025 15:32 CET Dominik Csapak <d.csapak at proxmox.com> wrote:
> 
>  
> 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(),

Don't we have a simpler way to center things? RTow is a flex layout,
so you can easily center children. 

>                      })
>                      .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},
> +                        }

match should be one level above...