mirror of
https://git.selfprivacy.org/kherel/selfprivacy.org.app.git
synced 2025-01-08 00:51:20 +00:00
refactor(ui): Add a very basic skeleton to the providers screen
This commit is contained in:
parent
a2b18f8075
commit
8eb7c96826
|
@ -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)
|
||||||
|
|
|
@ -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,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|
Loading…
Reference in a new issue