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:gap/gap.dart';
import 'package:selfprivacy/logic/models/state_types.dart'; import 'package:selfprivacy/logic/models/state_types.dart';
import 'package:selfprivacy/ui/atoms/masks/icon_status_mask.dart'; import 'package:selfprivacy/ui/atoms/masks/icon_status_mask.dart';
import 'package:skeletonizer/skeletonizer.dart';
class ProvidersPageCard extends StatelessWidget { class ProvidersPageCard extends StatelessWidget {
const ProvidersPageCard({ const ProvidersPageCard({
@ -33,15 +34,19 @@ class ProvidersPageCard extends StatelessWidget {
Row( Row(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
IconStatusMask( Skeleton.shade(
status: state, child: IconStatusMask(
icon: Icon(icon, size: 32, color: Colors.white), status: state,
icon: Icon(icon, size: 32, color: Colors.white),
),
), ),
const Gap(8), const Gap(8),
Expanded( Expanded(
child: Text( child: Skeleton.shade(
title, child: Text(
style: Theme.of(context).textTheme.headlineMedium, title,
style: Theme.of(context).textTheme.headlineMedium,
),
), ),
), ),
if (state != StateType.uninitialized) 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/organisms/headers/brand_header.dart';
import 'package:selfprivacy/ui/router/router.dart'; import 'package:selfprivacy/ui/router/router.dart';
import 'package:selfprivacy/utils/breakpoints.dart'; import 'package:selfprivacy/utils/breakpoints.dart';
import 'package:skeletonizer/skeletonizer.dart';
GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>(); GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
@ -31,8 +32,7 @@ class _ProvidersPageState extends State<ProvidersPage> {
Widget build(final BuildContext context) { Widget build(final BuildContext context) {
final bool isReady = context.watch<ServerInstallationCubit>().state final bool isReady = context.watch<ServerInstallationCubit>().state
is ServerInstallationFinished; is ServerInstallationFinished;
final bool isBackupInitialized = final BackupsState backupsState = context.watch<BackupsBloc>().state;
context.watch<BackupsBloc>().state.isInitialized;
final DnsRecordsStatus dnsStatus = final DnsRecordsStatus dnsStatus =
context.watch<DnsRecordsCubit>().state.dnsState; context.watch<DnsRecordsCubit>().state.dnsState;
@ -101,28 +101,40 @@ class _ProvidersPageState extends State<ProvidersPage> {
: null, : null,
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
ProvidersPageCard( Skeletonizer(
state: getDnsStatus(), enabled: dnsStatus == DnsRecordsStatus.refreshing,
icon: BrandIcons.globe, child: ProvidersPageCard(
title: 'domain.screen_title'.tr(), state: getDnsStatus(),
subtitle: appConfig.isDomainSelected icon: BrandIcons.globe,
? appConfig.serverDomain!.domainName title: 'domain.screen_title'.tr(),
: '', subtitle: appConfig.isDomainSelected
onTap: isClickable() ? appConfig.serverDomain!.domainName
? () => context.pushRoute(const DnsDetailsRoute()) : '',
: null, onTap: isClickable()
? () => context.pushRoute(const DnsDetailsRoute())
: null,
),
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
ProvidersPageCard( Skeletonizer(
state: isBackupInitialized enabled: backupsState is BackupsLoading ||
? StateType.stable backupsState is BackupsInitial,
: StateType.uninitialized, child: ProvidersPageCard(
icon: BrandIcons.save, state: backupsState is BackupsInitialized
title: 'backup.card_title'.tr(), ? StateType.stable
subtitle: isBackupInitialized ? 'backup.card_subtitle'.tr() : '', : StateType.uninitialized,
onTap: isClickable() icon: BrandIcons.save,
? () => context.pushRoute(const BackupDetailsRoute()) title: 'backup.card_title'.tr(),
: null, subtitle: backupsState is BackupsInitialized
? 'backup.card_subtitle'.tr()
: backupsState is BackupsLoading ||
backupsState is BackupsInitial
? 'basis.loading'.tr()
: '',
onTap: isClickable()
? () => context.pushRoute(const BackupDetailsRoute())
: null,
),
), ),
], ],
), ),