[pdm-devel] [PATCH datacenter-manager 12/15] ui: dashboard: status row: make loading less jarring

[Dominik Csapak]

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)
-- 
2.47.3