Added Skeleton Loading

lib/presentation/views/main_menu/create_game/create_game_view.dart

@@ -4,12 +4,12 @@ import 'package:game_tracker/core/enums.dart';
 import 'package:game_tracker/data/db/database.dart';
 import 'package:game_tracker/data/dto/game.dart';
 import 'package:game_tracker/data/dto/group.dart';
-import 'package:game_tracker/data/dto/player.dart';
 import 'package:game_tracker/presentation/views/main_menu/create_game/choose_group_view.dart';
 import 'package:game_tracker/presentation/views/main_menu/create_game/choose_ruleset_view.dart';
 import 'package:game_tracker/presentation/widgets/buttons/custom_width_button.dart';
 import 'package:game_tracker/presentation/widgets/text_input_field.dart';
 import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class CreateGameView extends StatefulWidget {
   const CreateGameView({super.key});
@@ -55,24 +55,15 @@ class _CreateGameViewState extends State<CreateGameView> {
     ),
   ];
 
-  late final List<Player> skeletonData = List.filled(
-    7,
-    Player(name: 'Player 0'),
-  );
-
   @override
   void initState() {
     super.initState();
     db = Provider.of<AppDatabase>(context, listen: false);
 
-    _gameNameController.addListener(() {
-      setState(() {});
-    });
-
     _allGroupsFuture = db.groupDao.getAllGroups();
 
     Future.wait([_allGroupsFuture]).then((result) async {
-      await Future.delayed(const Duration(milliseconds: 1000));
+      await Future.delayed(const Duration(milliseconds: 250));
       groupsList = result[0];
 
       if (mounted) {
@@ -97,11 +88,29 @@ class _CreateGameViewState extends State<CreateGameView> {
         centerTitle: true,
       ),
       body: SafeArea(
+        child: 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: Column(
             mainAxisAlignment: MainAxisAlignment.start,
             children: [
               Container(
-              margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+                margin: const EdgeInsets.symmetric(
+                  horizontal: 12,
+                  vertical: 10,
+                ),
                 child: TextInputField(
                   controller: _gameNameController,
                   hintText: 'Game name',
@@ -128,7 +137,7 @@ class _CreateGameViewState extends State<CreateGameView> {
                 child: Container(
                   margin: const EdgeInsets.symmetric(
                     horizontal: 12,
-                  vertical: 10,
+                    vertical: 5,
                   ),
                   padding: const EdgeInsets.symmetric(
                     vertical: 10,
@@ -145,7 +154,11 @@ class _CreateGameViewState extends State<CreateGameView> {
                         ),
                       ),
                       const Spacer(),
-                    Text(selectedRuleset == null ? 'None' : 'Single Winner'),
+                      Text(
+                        selectedRuleset == null
+                            ? 'None'
+                            : translateRulesetToString(selectedRuleset!),
+                      ),
                       const SizedBox(width: 10),
                       const Icon(Icons.arrow_forward_ios, size: 16),
                     ],
@@ -170,7 +183,7 @@ class _CreateGameViewState extends State<CreateGameView> {
                 child: Container(
                   margin: const EdgeInsets.symmetric(
                     horizontal: 12,
-                  vertical: 10,
+                    vertical: 5,
                   ),
                   padding: const EdgeInsets.symmetric(
                     vertical: 10,
@@ -187,13 +200,23 @@ class _CreateGameViewState extends State<CreateGameView> {
                         ),
                       ),
                       const Spacer(),
-                    Text(selectedGroup == null ? 'None' : selectedGroup!.name),
+                      Text(
+                        selectedGroup == null ? 'None' : selectedGroup!.name,
+                      ),
                       const SizedBox(width: 10),
                       const Icon(Icons.arrow_forward_ios, size: 16),
                     ],
                   ),
                 ),
               ),
+              Container(
+                decoration: CustomTheme.standardBoxDecoration,
+                width: MediaQuery.of(context).size.width * 0.95,
+                height: 400,
+                padding: const EdgeInsets.all(12),
+                margin: const EdgeInsets.symmetric(vertical: 10),
+                child: const Center(child: Text('PlayerComponent')),
+              ),
               const Spacer(),
               CustomWidthButton(
                 text: 'Create game',
@@ -210,13 +233,30 @@ class _CreateGameViewState extends State<CreateGameView> {
                           createdAt: DateTime.now(),
                           group: selectedGroup!,
                         );
-                      print('Creating game: ${game.name}');
+                        // TODO: Replace with navigation to GameResultView()
+                        print('Created game: $game');
+                        Navigator.pop(context);
                       },
               ),
               const SizedBox(height: 20),
             ],
           ),
         ),
+      ),
     );
   }
+
+  /// Translates a [Ruleset] enum value to its corresponding string representation.
+  String translateRulesetToString(Ruleset ruleset) {
+    switch (ruleset) {
+      case Ruleset.singleWinner:
+        return 'Single Winner';
+      case Ruleset.singleLoser:
+        return 'Single Loser';
+      case Ruleset.mostPoints:
+        return 'Most Points';
+      case Ruleset.lastPoints:
+        return 'Least Points';
+    }
+  }
 }