feat: Skeleton loader for app selector screen.

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<AppSelectorView> {
                     child: I18nText('appSelectorCard.noAppsLabel'),
                   )
                 : model.apps.isEmpty
-                    ? Center(
-                        child: CircularProgressIndicator(
-                          color: Theme.of(context).colorScheme.secondary,
-                        ),
-                      )
+                    ? const AppSkeletonLoader()
                     : Column(
                         children: <Widget>[
                           SearchBar(

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

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