lib/ui/pages/providers/providers.dart

@@ -6,6 +6,7 @@ import 'package:selfprivacy/logic/cubit/dns_records/dns_records_cubit.dart';
 import 'package:selfprivacy/logic/cubit/providers/providers_cubit.dart';
 import 'package:selfprivacy/logic/cubit/server_installation/server_installation_cubit.dart';
 import 'package:selfprivacy/logic/cubit/server_volumes/server_volume_cubit.dart';
+import 'package:selfprivacy/logic/models/json/backup.dart';
 import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
 import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
 import 'package:selfprivacy/ui/components/icon_status_mask/icon_status_mask.dart';
@@ -29,8 +30,7 @@ class _ProvidersPageState extends State<ProvidersPage> {
   Widget build(final BuildContext context) {
     final bool isReady = context.watch<ServerInstallationCubit>().state
         is ServerInstallationFinished;
-    final bool isBackupInitialized =
-        context.watch<BackupsCubit>().state.isInitialized;
+    final backupState = context.watch<BackupsCubit>().state;
     final DnsRecordsStatus dnsStatus =
         context.watch<DnsRecordsCubit>().state.dnsState;
 
@@ -85,29 +85,42 @@ class _ProvidersPageState extends State<ProvidersPage> {
                 .push(materialRoute(const ServerDetailsScreen())),
           ),
           const SizedBox(height: 16),
-          _Card(
-            state: getDnsStatus(),
-            icon: BrandIcons.globe,
-            title: 'domain.screen_title'.tr(),
-            subtitle: appConfig.isDomainSelected
-                ? appConfig.serverDomain!.domainName
-                : '',
-            onTap: () => Navigator.of(context).push(
-              materialRoute(
-                const DnsDetailsPage(),
+          if (dnsStatus == DnsRecordsStatus.refreshing)
+            _LoadingCard(
+              secondValue: Theme.of(context).colorScheme.secondary,
+              mainValue: Theme.of(context).colorScheme.primary,
+            ),
+          if (dnsStatus != DnsRecordsStatus.refreshing)
+            _Card(
+              state: getDnsStatus(),
+              icon: BrandIcons.globe,
+              title: 'domain.screen_title'.tr(),
+              subtitle: appConfig.isDomainSelected
+                  ? appConfig.serverDomain!.domainName
+                  : '',
+              onTap: () => Navigator.of(context).push(
+                materialRoute(
+                  const DnsDetailsPage(),
+                ),
               ),
             ),
-          ),
           const SizedBox(height: 16),
           // TODO: When backups are fixed, show this card
-          if (isBackupInitialized)
+          if (backupState.status == BackupStatusEnum.initializing ||
+              backupState.status == BackupStatusEnum.restoring)
+            _LoadingCard(
+              secondValue: Theme.of(context).colorScheme.secondary,
+              mainValue: Theme.of(context).colorScheme.primary,
+            ),
+          if (backupState.isInitialized)
             _Card(
-              state: isBackupInitialized
+              state: backupState.isInitialized
                   ? StateType.stable
                   : StateType.uninitialized,
               icon: BrandIcons.save,
               title: 'backup.card_title'.tr(),
-              subtitle: isBackupInitialized ? 'backup.card_subtitle'.tr() : '',
+              subtitle:
+                  backupState.isInitialized ? 'backup.card_subtitle'.tr() : '',
               onTap: () => Navigator.of(context)
                   .push(materialRoute(const BackupDetails())),
             ),
@@ -117,6 +130,41 @@ class _ProvidersPageState extends State<ProvidersPage> {
   }
 }
 
+class _LoadingCard extends StatelessWidget {
+  const _LoadingCard({
+    required this.mainValue,
+    required this.secondValue,
+  });
+
+  final Color mainValue;
+  final Color secondValue;
+
+  @override
+  Widget build(final BuildContext context) => ShaderMask(
+        shaderCallback: (final Rect bounds) => LinearGradient(
+          colors: <Color>[
+            mainValue,
+            secondValue,
+          ],
+          tileMode: TileMode.repeated,
+        ).createShader(bounds),
+        child: Card(
+          clipBehavior: Clip.antiAlias,
+          child: InkResponse(
+            highlightShape: BoxShape.rectangle,
+            child: Padding(
+              padding: const EdgeInsets.all(16),
+              child: Column(
+                children: const [
+                  SizedBox(height: 50),
+                ],
+              ),
+            ),
+          ),
+        ),
+      );
+}
+
 class _Card extends StatelessWidget {
   const _Card({
     required this.state,