[pdm-devel] [PATCH datacenter-manager] ui: subscription panel: add loading indicator for first load

[Dominik Csapak <d.csapak@proxmox.com>]

at that time, the panel is empty and the rotating refresh icon is not
always very noticeable, so add a loading indicator for the first load.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/configuration/subscription_panel.rs | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/ui/src/configuration/subscription_panel.rs b/ui/src/configuration/subscription_panel.rs
index 10111329..b094836c 100644
--- a/ui/src/configuration/subscription_panel.rs
+++ b/ui/src/configuration/subscription_panel.rs
@@ -7,8 +7,9 @@ use serde_json::Value;
 
 use yew::virtual_dom::{VComp, VNode};
 
+use pwt::css;
 use pwt::prelude::*;
-use pwt::widget::{error_message, Button, Column, Container, Row, Toolbar};
+use pwt::widget::{error_message, Button, Column, Container, Progress, Row, Toolbar};
 
 use proxmox_yew_comp::{http_get, http_post, KVGrid, KVGridRow};
 use proxmox_yew_comp::{LoadableComponent, LoadableComponentContext, LoadableComponentMaster};
@@ -31,6 +32,7 @@ pub enum Msg {
 pub struct ProxmoxSubscriptionPanel {
     rows: Rc<Vec<KVGridRow>>,
     data: Option<Rc<Value>>,
+    loaded: bool,
 }
 
 impl LoadableComponent for ProxmoxSubscriptionPanel {
@@ -42,6 +44,7 @@ impl LoadableComponent for ProxmoxSubscriptionPanel {
         Self {
             rows: Rc::new(rows()),
             data: None,
+            loaded: false,
         }
     }
 
@@ -49,6 +52,7 @@ impl LoadableComponent for ProxmoxSubscriptionPanel {
         match msg {
             Msg::LoadFinished(value) => {
                 self.data = Some(Rc::new(value));
+                self.loaded = true;
             }
         }
         true
@@ -108,10 +112,15 @@ impl LoadableComponent for ProxmoxSubscriptionPanel {
             None => Rc::new(Value::Null),
         };
 
-        KVGrid::new()
-            .class("pwt-flex-fit")
-            .data(data.clone())
-            .rows(Rc::clone(&self.rows))
+        Column::new()
+            .class(css::FlexFit)
+            .with_optional_child((!self.loaded).then_some(Progress::new()))
+            .with_child(
+                KVGrid::new()
+                    .class(css::FlexFit)
+                    .data(data.clone())
+                    .rows(Rc::clone(&self.rows)),
+            )
             .into()
     }
 }
-- 
2.47.3



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel