From 61d049118fb5eb27b80d302dba535fc43ca8d094 Mon Sep 17 00:00:00 2001
From: Inex Code <inex.code@selfprivacy.org>
Date: Fri, 16 Sep 2022 13:36:26 +0300
Subject: [PATCH] Add animation for graph loading

---
 assets/translations/en.json                   |  1 +
 lib/config/bloc_observer.dart                 |  1 -
 lib/ui/pages/server_details/charts/chart.dart | 54 +++++++++++++------
 .../server_details/server_details_screen.dart |  8 ++-
 4 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/assets/translations/en.json b/assets/translations/en.json
index 253d39e1..c4d319dc 100644
--- a/assets/translations/en.json
+++ b/assets/translations/en.json
@@ -106,6 +106,7 @@
         "in": "In",
         "out": "Out"
       },
+      "resource_usage": "Resource usage",
       "settings": {
         "allow_autoupgrade": "Allow auto-upgrade",
         "allow_autoupgrade_hint": "Allow automatic packages upgrades on server",
diff --git a/lib/config/bloc_observer.dart b/lib/config/bloc_observer.dart
index 3f2f26d8..d8bf846a 100644
--- a/lib/config/bloc_observer.dart
+++ b/lib/config/bloc_observer.dart
@@ -11,7 +11,6 @@ class SimpleBlocObserver extends BlocObserver {
     final Object error,
     final StackTrace stackTrace,
   ) {
-
     getIt<NavigationService>().showSnackBar(
       'Bloc error: ${error.toString()}',
     );
diff --git a/lib/ui/pages/server_details/charts/chart.dart b/lib/ui/pages/server_details/charts/chart.dart
index 12528767..60dfc092 100644
--- a/lib/ui/pages/server_details/charts/chart.dart
+++ b/lib/ui/pages/server_details/charts/chart.dart
@@ -7,15 +7,7 @@ class _Chart extends StatelessWidget {
     final Period period = cubit.state.period;
     final HetznerMetricsState state = cubit.state;
     List<Widget> charts;
-    if (state is HetznerMetricsLoading) {
-      charts = [
-        Container(
-          height: 200,
-          alignment: Alignment.center,
-          child: Text('basis.loading'.tr()),
-        )
-      ];
-    } else if (state is HetznerMetricsLoaded) {
+    if (state is HetznerMetricsLoaded || state is HetznerMetricsLoading) {
       charts = [
         FilledCard(
           clipped: false,
@@ -31,7 +23,17 @@ class _Chart extends StatelessWidget {
                       ),
                 ),
                 const SizedBox(height: 16),
-                getCpuChart(state),
+                Stack(
+                  alignment: Alignment.center,
+                  children: [
+                    if (state is HetznerMetricsLoaded) getCpuChart(state),
+                    AnimatedOpacity(
+                      duration: const Duration(milliseconds: 200),
+                      opacity: state is HetznerMetricsLoading ? 1 : 0,
+                      child: const _GraphLoadingCardContent(),
+                    ),
+                  ],
+                ),
               ],
             ),
           ),
@@ -56,16 +58,28 @@ class _Chart extends StatelessWidget {
                     ),
                     const Spacer(),
                     Legend(
-                        color: Theme.of(context).colorScheme.primary,
-                        text: 'providers.server.chart.in'.tr()),
+                      color: Theme.of(context).colorScheme.primary,
+                      text: 'providers.server.chart.in'.tr(),
+                    ),
                     const SizedBox(width: 5),
                     Legend(
-                        color: Theme.of(context).colorScheme.tertiary,
-                        text: 'providers.server.chart.out'.tr()),
+                      color: Theme.of(context).colorScheme.tertiary,
+                      text: 'providers.server.chart.out'.tr(),
+                    ),
                   ],
                 ),
                 const SizedBox(height: 20),
-                getBandwidthChart(state),
+                Stack(
+                  alignment: Alignment.center,
+                  children: [
+                    if (state is HetznerMetricsLoaded) getBandwidthChart(state),
+                    AnimatedOpacity(
+                      duration: const Duration(milliseconds: 200),
+                      opacity: state is HetznerMetricsLoading ? 1 : 0,
+                      child: const _GraphLoadingCardContent(),
+                    ),
+                  ],
+                ),
               ],
             ),
           ),
@@ -136,6 +150,16 @@ class _Chart extends StatelessWidget {
   }
 }
 
+class _GraphLoadingCardContent extends StatelessWidget {
+  const _GraphLoadingCardContent();
+
+  @override
+  Widget build(final BuildContext context) => const SizedBox(
+        height: 200,
+        child: Center(child: CircularProgressIndicator()),
+      );
+}
+
 class Legend extends StatelessWidget {
   const Legend({
     required this.color,
diff --git a/lib/ui/pages/server_details/server_details_screen.dart b/lib/ui/pages/server_details/server_details_screen.dart
index 16f87be8..5b839ef1 100644
--- a/lib/ui/pages/server_details/server_details_screen.dart
+++ b/lib/ui/pages/server_details/server_details_screen.dart
@@ -88,11 +88,17 @@ class _ServerDetailsScreenState extends State<ServerDetailsScreen>
               context.read<ApiProviderVolumeCubit>().state.volumes,
             ),
           ),
+          const Divider(height: 32),
+          Text(
+            'providers.server.resource_usage'.tr(),
+            style: Theme.of(context).textTheme.titleLarge,
+          ),
+          const SizedBox(height: 8),
           BlocProvider(
             create: (final context) => HetznerMetricsCubit()..restart(),
             child: _Chart(),
           ),
-          const SizedBox(height: 20),
+          const Divider(height: 32),
           _TextDetails(),
           const _ServerSettings(),
         ],