[pdm-devel] [PATCH datacenter-manager v2 13/16] ui: dashboard: status row: make loading less jarring

[Shannon Sterz]

just a small top-level note: this is an improvement but on a fast
connection this means the icon essentially just blinks very quickly.
given the spinning icon is gray this looks as if the icon dims for a
split second. imo, this is fine, but wanted to mention it as while
testing it, it was hard to tell if anything happened at all at first.

On Thu Oct 23, 2025 at 10:28 AM CEST, Dominik Csapak wrote:
> by tracking the loading state not only via the last_refresh property,
> but also from a reload message to a changing last_refresh value.
>
> This means it now always shows the last refresh time if there was one
> and only rotates the icon in that case.
>
> This is much less jarring that a split second change of the text from
> a date to 'now refreshing' back to a finished date.
>
> While at it, remove the unused 'loading' property of the PdmDashboard
> struct.
>
> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
>  ui/src/dashboard/mod.rs        | 11 ++---------
>  ui/src/dashboard/status_row.rs | 11 +++++++++--
>  2 files changed, 11 insertions(+), 11 deletions(-)
>
> diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
> index e4115c6d..a394ea81 100644
> --- a/ui/src/dashboard/mod.rs
> +++ b/ui/src/dashboard/mod.rs
> @@ -102,8 +102,6 @@ pub struct PdmDashboard {
>      top_entities: Option<pdm_client::types::TopEntities>,
>      last_top_entities_error: Option<proxmox_client::Error>,
>      statistics: StatisticsOptions,
> -    loaded_once: bool,
> -    loading: bool,
>      load_finished_time: Option<f64>,
>      show_wizard: Option<RemoteType>,
>      show_config_window: bool,
> @@ -113,7 +111,7 @@ pub struct PdmDashboard {
>
>  impl PdmDashboard {
>      fn reload(&mut self, ctx: &yew::Context<Self>) {
> -        let max_age = if self.loaded_once {
> +        let max_age = if self.load_finished_time.is_some() {
>              self.config.max_age.unwrap_or(DEFAULT_MAX_AGE_S)
>          } else {
>              INITIAL_MAX_AGE_S
> @@ -125,7 +123,6 @@ impl PdmDashboard {
>          let link = ctx.link().clone();
>          let (_, since) = get_task_options(self.config.task_last_hours);
>
> -        self.load_finished_time = None;
>          self.async_pool.spawn(async move {
>              let client = crate::pdm_client();
>
> @@ -183,8 +180,6 @@ impl Component for PdmDashboard {
>                  data: None,
>                  error: None,
>              },
> -            loaded_once: false,
> -            loading: true,
>              load_finished_time: None,
>              show_wizard: None,
>              show_config_window: false,
> @@ -224,9 +219,7 @@ impl Component for PdmDashboard {
>                          Err(err) => self.statistics.error = Some(err),
>                      },
>                      LoadingResult::All => {
> -                        self.loading = false;
> -                        if !self.loaded_once {
> -                            self.loaded_once = true;
> +                        if self.load_finished_time.is_none() {
>                              // immediately trigger a "normal" reload after the first load with the
>                              // configured or default max-age to ensure users sees more current data.
>                              ctx.link().send_message(Msg::Reload);
> diff --git a/ui/src/dashboard/status_row.rs b/ui/src/dashboard/status_row.rs
> index 5e377411..0855b123 100644
> --- a/ui/src/dashboard/status_row.rs
> +++ b/ui/src/dashboard/status_row.rs
> @@ -45,6 +45,7 @@ pub enum Msg {
>  #[doc(hidden)]
>  pub struct PdmDashboardStatusRow {
>      _interval: Interval,
> +    loading: bool,
>  }
>
>  impl PdmDashboardStatusRow {
> @@ -68,6 +69,7 @@ impl Component for PdmDashboardStatusRow {
>      fn create(ctx: &yew::Context<Self>) -> Self {
>          Self {
>              _interval: Self::create_interval(ctx),
> +            loading: false,
>          }
>      }
>
> @@ -76,19 +78,24 @@ impl Component for PdmDashboardStatusRow {
>          match msg {
>              Msg::Reload(clicked) => {
>                  props.on_reload.emit(clicked);
> +                self.loading = true;
>                  true
>              }
>          }
>      }
>
> -    fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
> +    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
>          self._interval = Self::create_interval(ctx);
> +        let new_refresh = ctx.props().last_refresh;
> +        if new_refresh.is_some() && old_props.last_refresh != new_refresh {
> +            self.loading = false;
> +        }
>          true
>      }
>
>      fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
>          let props = ctx.props();
> -        let is_loading = props.last_refresh.is_none();
> +        let is_loading = props.last_refresh.is_none() || self.loading;
>          let on_settings_click = props.on_settings_click.clone();
>          Row::new()
>              .gap(1)