diff --git a/lib/ui/views/app_selector/app_selector_view.dart b/lib/ui/views/app_selector/app_selector_view.dart index 9494997f..f2dbba78 100644 --- a/lib/ui/views/app_selector/app_selector_view.dart +++ b/lib/ui/views/app_selector/app_selector_view.dart @@ -3,7 +3,8 @@ import 'package:flutter_i18n/flutter_i18n.dart'; import 'package:revanced_manager/theme.dart'; import 'package:revanced_manager/ui/widgets/appSelectorView/installed_app_item.dart'; import 'package:revanced_manager/ui/widgets/shared/search_bar.dart'; -import 'package:stacked/stacked.dart'; +import 'package:revanced_manager/ui/widgets/appSelectorView/app_skeleton_loader.dart'; +import 'package:stacked/stacked.dart' hide SkeletonLoader; import 'package:revanced_manager/ui/views/app_selector/app_selector_viewmodel.dart'; class AppSelectorView extends StatefulWidget { @@ -44,11 +45,7 @@ class _AppSelectorViewState extends State { child: I18nText('appSelectorCard.noAppsLabel'), ) : model.apps.isEmpty - ? Center( - child: CircularProgressIndicator( - color: Theme.of(context).colorScheme.secondary, - ), - ) + ? const AppSkeletonLoader() : Column( children: [ SearchBar( diff --git a/lib/ui/widgets/appSelectorView/app_skeleton_loader.dart b/lib/ui/widgets/appSelectorView/app_skeleton_loader.dart new file mode 100644 index 00000000..1496a2e2 --- /dev/null +++ b/lib/ui/widgets/appSelectorView/app_skeleton_loader.dart @@ -0,0 +1,65 @@ +import 'package:flutter/material.dart'; +import 'package:skeletons/skeletons.dart'; + +class AppSkeletonLoader extends StatelessWidget { + const AppSkeletonLoader({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final screenWidth = MediaQuery.of(context).size.width; + return Skeleton( + isLoading: true, + skeleton: ListView.builder( + itemCount: 7, + itemBuilder: (context, index) => Padding( + padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8.0), + child: SkeletonItem( + child: Row( + children: [ + SkeletonAvatar( + style: SkeletonAvatarStyle( + width: screenWidth * 0.15, + height: screenWidth * 0.15, + shape: BoxShape.rectangle, + borderRadius: const BorderRadius.all(Radius.circular(12)), + ), + ), + const SizedBox(width: 16), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + color: Colors.white, + height: 25, + width: screenWidth * 0.4, + child: SkeletonParagraph( + style: const SkeletonParagraphStyle( + lines: 1, + ), + ), + ), + const SizedBox(height: 12), + Container( + margin: const EdgeInsets.only(bottom: 4), + color: Colors.white, + height: 25, + width: screenWidth * 0.6, + child: SkeletonParagraph( + style: const SkeletonParagraphStyle( + lines: 1, + ), + ), + ), + ], + ), + ], + ), + ), + ), + ), + child: const Center( + child: Text("Content"), + ), + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index d57628f2..e838189e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -40,6 +40,7 @@ dependencies: root: ^2.0.2 share_extend: ^2.0.0 shared_preferences: ^2.0.15 + skeletons: ^0.0.3 stacked: ^2.3.15 stacked_generator: ^0.7.14 stacked_services: ^0.9.3