refactor(ui): Add skeletons to the Devices page

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';

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<ApiToken> get _devices =>
       getIt<ApiConnectionRepository>().apiData.devices.data ?? const [];
 
   List<ApiToken> 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<ApiToken> get otherDevices =>

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,

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(),
+  );
 }