Add animation for graph loading

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",

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()}',
     );

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) {
+    if (state is HetznerMetricsLoaded || state is HetznerMetricsLoading) {
-      charts = [
-        Container(
-          height: 200,
-          alignment: Alignment.center,
-          child: Text('basis.loading'.tr()),
-        )
-      ];
-    } else if (state is HetznerMetricsLoaded) {
       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,
+                      color: Theme.of(context).colorScheme.primary,
-                        text: 'providers.server.chart.in'.tr()),
+                      text: 'providers.server.chart.in'.tr(),
+                    ),
                     const SizedBox(width: 5),
                     Legend(
-                        color: Theme.of(context).colorScheme.tertiary,
+                      color: Theme.of(context).colorScheme.tertiary,
-                        text: 'providers.server.chart.out'.tr()),
+                      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,

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(),
         ],