lib/presentation/views/main_menu/home_view.dart

@@ -5,6 +5,7 @@ import 'package:game_tracker/presentation/widgets/quick_create_button.dart';
 import 'package:game_tracker/presentation/widgets/tiles/info_tile.dart';
 import 'package:game_tracker/presentation/widgets/tiles/quick_info_tile.dart';
 import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class HomeView extends StatefulWidget {
   const HomeView({super.key});
@@ -16,6 +17,7 @@ class HomeView extends StatefulWidget {
 class _HomeViewState extends State<HomeView> {
   late Future<int> _gameCountFuture;
   late Future<int> _groupCountFuture;
+  bool isLoading = true;
 
   @override
   initState() {
@@ -23,13 +25,37 @@ class _HomeViewState extends State<HomeView> {
     final db = Provider.of<AppDatabase>(context, listen: false);
     _gameCountFuture = db.gameDao.getGameCount();
     _groupCountFuture = db.groupDao.getGroupCount();
+
+    Future.wait([_gameCountFuture, _groupCountFuture]).then((_) async {
+      await Future.delayed(const Duration(milliseconds: 50));
+      if (mounted) {
+        setState(() {
+          isLoading = false;
+        });
+      }
+    });
   }
 
   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(
       builder: (BuildContext context, BoxConstraints constraints) {
-        return SingleChildScrollView(
+        return Skeletonizer(
+          effect: PulseEffect(
+            from: Colors.grey[800]!,
+            to: Colors.grey[600]!,
+            duration: const Duration(milliseconds: 800),
+          ),
+          enabled: isLoading,
+          enableSwitchAnimation: true,
+          switchAnimationConfig: const SwitchAnimationConfig(
+            duration: Duration(milliseconds: 200),
+            switchInCurve: Curves.linear,
+            switchOutCurve: Curves.linear,
+            transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
+            layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,
+          ),
+          child: SingleChildScrollView(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
@@ -39,7 +65,9 @@ class _HomeViewState extends State<HomeView> {
                     FutureBuilder<int>(
                       future: _gameCountFuture,
                       builder: (context, snapshot) {
-                      final int count = (snapshot.hasData) ? snapshot.data! : 0;
+                        final int count = (snapshot.hasData)
+                            ? snapshot.data!
+                            : 0;
                         return QuickInfoTile(
                           width: constraints.maxWidth * 0.45,
                           height: constraints.maxHeight * 0.15,
@@ -115,22 +143,40 @@ class _HomeViewState extends State<HomeView> {
                       Row(
                         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                         children: [
-                        QuickCreateButton(text: 'Category 1', onPressed: () {}),
+                          QuickCreateButton(
-                        QuickCreateButton(text: 'Category 2', onPressed: () {}),
+                            text: 'Category 1',
+                            onPressed: () {},
+                          ),
+                          QuickCreateButton(
+                            text: 'Category 2',
+                            onPressed: () {},
+                          ),
                         ],
                       ),
                       Row(
                         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                         children: [
-                        QuickCreateButton(text: 'Category 3', onPressed: () {}),
+                          QuickCreateButton(
-                        QuickCreateButton(text: 'Category 4', onPressed: () {}),
+                            text: 'Category 3',
+                            onPressed: () {},
+                          ),
+                          QuickCreateButton(
+                            text: 'Category 4',
+                            onPressed: () {},
+                          ),
                         ],
                       ),
                       Row(
                         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                         children: [
-                        QuickCreateButton(text: 'Category 5', onPressed: () {}),
+                          QuickCreateButton(
-                        QuickCreateButton(text: 'Category 6', onPressed: () {}),
+                            text: 'Category 5',
+                            onPressed: () {},
+                          ),
+                          QuickCreateButton(
+                            text: 'Category 6',
+                            onPressed: () {},
+                          ),
                         ],
                       ),
                     ],
@@ -138,6 +184,7 @@ class _HomeViewState extends State<HomeView> {
                 ),
               ],
             ),
+          ),
         );
       },
     );

lib/presentation/widgets/game_tile.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/core/custom_theme.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class GameTile extends StatefulWidget {
   final String gameTitle;
@@ -48,11 +49,13 @@ class _GameTileState extends State<GameTile> {
             borderRadius: BorderRadius.circular(4),
             color: CustomTheme.primaryColor,
           ),
+          child: Skeleton.ignore(
             child: Text(
               widget.ruleset,
               style: const TextStyle(fontWeight: FontWeight.bold),
             ),
           ),
+        ),
         Center(
           heightFactor: 1.5,
           child: Text(
@@ -68,6 +71,7 @@ class _GameTileState extends State<GameTile> {
               borderRadius: BorderRadius.circular(4),
               color: Colors.yellow.shade300,
             ),
+            child: Skeleton.ignore(
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
@@ -84,6 +88,7 @@ class _GameTileState extends State<GameTile> {
               ),
             ),
           ),
+        ),
       ],
     );
   }