diff --git a/lib/logic/bloc/devices/devices_bloc.dart b/lib/logic/bloc/devices/devices_bloc.dart index fdba66e9..4b3c67b5 100644 --- a/lib/logic/bloc/devices/devices_bloc.dart +++ b/lib/logic/bloc/devices/devices_bloc.dart @@ -6,6 +6,7 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:selfprivacy/config/get_it_config.dart'; import 'package:selfprivacy/logic/api_maps/generic_result.dart'; import 'package:selfprivacy/logic/models/json/api_token.dart'; +import 'package:selfprivacy/utils/fake_data.dart'; part 'devices_event.dart'; part 'devices_state.dart'; diff --git a/lib/logic/bloc/devices/devices_state.dart b/lib/logic/bloc/devices/devices_state.dart index b31bdf19..9e0c0ba4 100644 --- a/lib/logic/bloc/devices/devices_state.dart +++ b/lib/logic/bloc/devices/devices_state.dart @@ -7,17 +7,15 @@ sealed class DevicesState extends Equatable { final int _hashCode; + bool get isLoaded => _devices.isNotEmpty; + List get _devices => getIt().apiData.devices.data ?? const []; List get devices => _devices; ApiToken get thisDevice => _devices.firstWhere( (final device) => device.isCaller, - orElse: () => ApiToken( - name: 'Error fetching device', - isCaller: true, - date: DateTime.now(), - ), + orElse: () => FakeSelfPrivacyData.thisDeviceToken, ); List get otherDevices => diff --git a/lib/ui/pages/devices/devices.dart b/lib/ui/pages/devices/devices.dart index 57b120fa..f2d728a7 100644 --- a/lib/ui/pages/devices/devices.dart +++ b/lib/ui/pages/devices/devices.dart @@ -9,6 +9,8 @@ import 'package:selfprivacy/ui/layouts/brand_hero_screen.dart'; import 'package:selfprivacy/ui/molecules/info_box/info_box.dart'; import 'package:selfprivacy/ui/molecules/list_items/device_item.dart'; import 'package:selfprivacy/ui/router/router.dart'; +import 'package:selfprivacy/utils/fake_data.dart'; +import 'package:skeletonizer/skeletonizer.dart'; @RoutePage() class DevicesPage extends StatefulWidget { @@ -77,8 +79,12 @@ class _DevicesInfo extends StatelessWidget { SectionTitle( title: 'devices.main_screen.this_device'.tr(), ), - DeviceItem( - device: devicesStatus.thisDevice, + Skeletonizer( + enabled: + devicesStatus.thisDevice == FakeSelfPrivacyData.thisDeviceToken, + child: DeviceItem( + device: devicesStatus.thisDevice, + ), ), const SizedBox(height: 8), const Divider(height: 1), @@ -92,7 +98,17 @@ class _DevicesInfo extends StatelessWidget { child: CircularProgressIndicator.adaptive(), ), ], - if (devicesStatus is! DevicesDeleting) + if (!devicesStatus.isLoaded) + ...List.generate( + 3, + (final index) => Skeletonizer( + enabled: true, + child: DeviceItem( + device: FakeSelfPrivacyData.otherDeviceToken, + ), + ), + ), + if (devicesStatus is! DevicesDeleting && devicesStatus.isLoaded) ...devicesStatus.otherDevices.map( (final device) => DeviceItem( device: device, diff --git a/lib/utils/fake_data.dart b/lib/utils/fake_data.dart index a2fc4ea6..ab2079d8 100644 --- a/lib/utils/fake_data.dart +++ b/lib/utils/fake_data.dart @@ -1,4 +1,5 @@ import 'package:selfprivacy/logic/api_maps/rest_maps/dns_providers/desired_dns_record.dart'; +import 'package:selfprivacy/logic/models/json/api_token.dart'; /// Fake data collections to fill skeletons class FakeSelfPrivacyData { @@ -28,4 +29,16 @@ class FakeSelfPrivacyData { content: 'Some very very long text text text', ), ]; + + static final ApiToken thisDeviceToken = ApiToken( + name: 'Error fetching device', + isCaller: true, + date: DateTime.now(), + ); + + static final ApiToken otherDeviceToken = ApiToken( + name: 'Error fetching device', + isCaller: false, + date: DateTime.now(), + ); }