Attempt to improve responsiveness of dashboard

LANCommander/Pages/Dashboard/Charts/NetworkDownloadRate.razor

@@ -3,7 +3,9 @@
 @using AntDesign.Charts;
 @using System.Collections.Concurrent;
 
-<Area @ref="Chart" Config="Config" />
+<Spin Spinning="Loading">
+    <Area @ref="Chart" Config="Config" />
+</Spin>
 
 @code {
     [Parameter] public int TimerHistory { get; set; }
@@ -11,6 +13,7 @@
 
     IChartComponent? Chart;
     System.Timers.Timer Timer;
+    bool Loading = true;
 
     Dictionary<string, double[]> Data = new Dictionary<string, double[]>();
 
@@ -39,27 +42,29 @@
         }
     };
 
-    protected override async Task OnInitializedAsync()
-    {
-        if (Timer == null)
-        {
-            Timer = new System.Timers.Timer();
-
-            Timer.Interval = TimerInterval;
-
-            Timer.Elapsed += async (s, e) =>
-            {
-                await RefreshData();
-            };
-        }
-    }
-
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
+            if (Timer == null)
+            {
+                Timer = new System.Timers.Timer();
+
+                Timer.Interval = TimerInterval;
+
+                Timer.Elapsed += async (s, e) =>
+                {
+                    await RefreshData();
+                };
+            }
+
             await Chart.UpdateChart(Config, null, null, JsConfig);
+
             Timer.Start();
+
+            Loading = false;
+
+            StateHasChanged();
         }
     }
 

LANCommander/Pages/Dashboard/Charts/NetworkUploadRate.razor

@@ -3,7 +3,9 @@
 @using AntDesign.Charts;
 @using System.Collections.Concurrent;
 
-<Area @ref="Chart" Config="Config" />
+<Spin Spinning="Loading">
+    <Area @ref="Chart" Config="Config" />
+</Spin>
 
 @code {
     [Parameter] public int TimerHistory { get; set; }
@@ -11,6 +13,7 @@
 
     IChartComponent? Chart;
     System.Timers.Timer Timer;
+    bool Loading = true;
 
     Dictionary<string, double[]> Data = new Dictionary<string, double[]>();
 
@@ -39,27 +42,28 @@
         }
     };
 
-    protected override async Task OnInitializedAsync()
-    {
-        if (Timer == null)
-        {
-            Timer = new System.Timers.Timer();
-
-            Timer.Interval = TimerInterval;
-
-            Timer.Elapsed += async (s, e) =>
-            {
-                await RefreshData();
-            };
-        }
-    }
-
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
+            if (Timer == null)
+            {
+                Timer = new System.Timers.Timer();
+
+                Timer.Interval = TimerInterval;
+
+                Timer.Elapsed += async (s, e) =>
+                {
+                    await RefreshData();
+                };
+            }
+
             await Chart.UpdateChart(Config, null, null, JsConfig);
             Timer.Start();
+
+            Loading = false;
+
+            StateHasChanged();
         }
     }
 

LANCommander/Pages/Dashboard/Charts/ProcessorUtilization.razor

@@ -2,13 +2,16 @@
 @using LANCommander.Extensions;
 @using AntDesign.Charts;
 
-<Area @ref="Chart" Config="Config" />
+<Spin Spinning="Loading">
+    <Area @ref="Chart" Config="Config" />
+</Spin>
 
 @code {
     [Parameter] public int TimerHistory { get; set; }
     [Parameter] public int TimerInterval { get; set; }
     IChartComponent? Chart;
     System.Timers.Timer Timer;
+    bool Loading = true;
 
     double[] Data;
 
@@ -42,27 +45,28 @@
         }
     };
 
-    protected override async Task OnInitializedAsync()
-    {
-        if (Timer == null)
-        {
-            Timer = new System.Timers.Timer();
-
-            Timer.Interval = TimerInterval;
-
-            Timer.Elapsed += async (s, e) =>
-            {
-                await RefreshData();
-            };
-        }
-    }
-
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
+            if (Timer == null)
+            {
+                Timer = new System.Timers.Timer();
+
+                Timer.Interval = TimerInterval;
+
+                Timer.Elapsed += async (s, e) =>
+                {
+                    await RefreshData();
+                };
+            }
+
             await Chart.UpdateChart(Config, null, null, JsConfig);
             Timer.Start();
+
+            Loading = false;
+
+            StateHasChanged();
         }
     }
 

LANCommander/Pages/Dashboard/Charts/StorageUsage.razor

@@ -1,16 +1,20 @@
 @using AntDesign.Charts
 @using ByteSizeLib
 
-<Pie Data="Data" Config="Config" JsConfig="@JsConfig" />
+<Spin Spinning="Loading">
+    <Pie Data="Data" Config="Config" JsConfig="@JsConfig" />
+</Spin>
 
 @code {
     object[] Data;
 
+    bool Loading = true;
+
     string JsConfig = @"{
         meta: {
             value: {
                 alias: 'Data Usage',
-                formatter: (v) => humanFileSize(v, true)
+                formatter: (v) => Uploader.GetHumanFileSize(v, true, 1)
             }
         },
         label: {
@@ -58,6 +62,8 @@
             }
         };
 
+        Loading = false;
+
         StateHasChanged();
     }
 }