refactor(ui): Add a very basic skeleton to the providers screen

This commit is contained in:
Inex Code 2024-12-11 18:17:19 +03:00
parent a2b18f8075
commit 8eb7c96826
No known key found for this signature in database
2 changed files with 45 additions and 28 deletions

View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:selfprivacy/logic/models/state_types.dart';
import 'package:selfprivacy/ui/atoms/masks/icon_status_mask.dart';
import 'package:skeletonizer/skeletonizer.dart';
class ProvidersPageCard extends StatelessWidget {
const ProvidersPageCard({
@ -33,15 +34,19 @@ class ProvidersPageCard extends StatelessWidget {
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconStatusMask(
status: state,
icon: Icon(icon, size: 32, color: Colors.white),
Skeleton.shade(
child: IconStatusMask(
status: state,
icon: Icon(icon, size: 32, color: Colors.white),
),
),
const Gap(8),
Expanded(
child: Text(
title,
style: Theme.of(context).textTheme.headlineMedium,
child: Skeleton.shade(
child: Text(
title,
style: Theme.of(context).textTheme.headlineMedium,
),
),
),
if (state != StateType.uninitialized)

View file

@ -15,6 +15,7 @@ import 'package:selfprivacy/ui/molecules/cards/server_outdated_card.dart';
import 'package:selfprivacy/ui/organisms/headers/brand_header.dart';
import 'package:selfprivacy/ui/router/router.dart';
import 'package:selfprivacy/utils/breakpoints.dart';
import 'package:skeletonizer/skeletonizer.dart';
GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
@ -31,8 +32,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<BackupsBloc>().state.isInitialized;
final BackupsState backupsState = context.watch<BackupsBloc>().state;
final DnsRecordsStatus dnsStatus =
context.watch<DnsRecordsCubit>().state.dnsState;
@ -101,28 +101,40 @@ class _ProvidersPageState extends State<ProvidersPage> {
: null,
),
const SizedBox(height: 16),
ProvidersPageCard(
state: getDnsStatus(),
icon: BrandIcons.globe,
title: 'domain.screen_title'.tr(),
subtitle: appConfig.isDomainSelected
? appConfig.serverDomain!.domainName
: '',
onTap: isClickable()
? () => context.pushRoute(const DnsDetailsRoute())
: null,
Skeletonizer(
enabled: dnsStatus == DnsRecordsStatus.refreshing,
child: ProvidersPageCard(
state: getDnsStatus(),
icon: BrandIcons.globe,
title: 'domain.screen_title'.tr(),
subtitle: appConfig.isDomainSelected
? appConfig.serverDomain!.domainName
: '',
onTap: isClickable()
? () => context.pushRoute(const DnsDetailsRoute())
: null,
),
),
const SizedBox(height: 16),
ProvidersPageCard(
state: isBackupInitialized
? StateType.stable
: StateType.uninitialized,
icon: BrandIcons.save,
title: 'backup.card_title'.tr(),
subtitle: isBackupInitialized ? 'backup.card_subtitle'.tr() : '',
onTap: isClickable()
? () => context.pushRoute(const BackupDetailsRoute())
: null,
Skeletonizer(
enabled: backupsState is BackupsLoading ||
backupsState is BackupsInitial,
child: ProvidersPageCard(
state: backupsState is BackupsInitialized
? StateType.stable
: StateType.uninitialized,
icon: BrandIcons.save,
title: 'backup.card_title'.tr(),
subtitle: backupsState is BackupsInitialized
? 'backup.card_subtitle'.tr()
: backupsState is BackupsLoading ||
backupsState is BackupsInitial
? 'basis.loading'.tr()
: '',
onTap: isClickable()
? () => context.pushRoute(const BackupDetailsRoute())
: null,
),
),
],
),