Add lazy load to the sound files page

Author: theEvilReaper

lib/feature/sound/sound_file_entries.dart

@@ -1,6 +1,7 @@
 import 'package:async_redux/async_redux.dart';
 import 'package:flutter/material.dart';
 import 'package:stelaris/api/model/sound/sound_file_source.dart';
+import 'package:stelaris/api/paginated_result.dart';
 import 'package:stelaris/api/state/actions/sound/sound_actions.dart';
 import 'package:stelaris/api/state/actions/sound/sound_file_actions.dart';
 import 'package:stelaris/api/state/app_state.dart';
@@ -39,7 +40,7 @@ class _SoundFileEntriesState extends State<SoundFileEntryPage> {
   Widget build(BuildContext context) {
     return StoreConnector<AppState, SelectedSoundView>(
       vm: () => SelectedSoundState(),
-      onInit: (store) => InitSoundFileAction(),
+      onInit: (store) => store.dispatch(InitSoundFileAction()),
       onDidChange: (context, store, viewModel) {
         _vm = viewModel;
       },
@@ -55,22 +56,10 @@ class _SoundFileEntriesState extends State<SoundFileEntryPage> {
             vm.hasNoFiles
                 ? const Flexible(flex: 1, child: EmptyDataWidget())
                 : Expanded(
-                    child: ListView.builder(
-                      controller: _scrollController,
-                      padding: const EdgeInsets.all(8),
-                      itemCount: vm.fileCount, // Example: 10 items
-                      itemBuilder: (context, index) {
-                        return ConstrainedBox(
-                          constraints: const BoxConstraints(
-                            minWidth: 220,
-                            maxWidth: 400,
-                          ),
-                          child: SoundFileCard(eventModel: vm[index]),
-                        );
-                      },
-                    ),
-                  ),
-          ],
+              child: _buildListView(vm),
+            ),
+          ]
+          ,
         );
       },
     );
@@ -86,10 +75,11 @@ class _SoundFileEntriesState extends State<SoundFileEntryPage> {
   void _openAddDialog() {
     showDialog(
       context: context,
-      builder: (context) => SoundFileModal(
-        create: true,
-        onSave:
-            ({
+      builder: (context) =>
+          SoundFileModal(
+            create: true,
+            onSave:
+                ({
               required name,
               required volume,
               required pitch,
@@ -111,7 +101,31 @@ class _SoundFileEntriesState extends State<SoundFileEntryPage> {
               context.dispatch(SoundFileSourceAddAction(fileSource));
               // Handle save logic here
             },
-      ),
+          ),
+    );
+  }
+
+  Widget _buildListView(SelectedSoundView state) {
+    final PaginatedResult<SoundFileSource> files = state.selected.files;
+    final hasFooter = state.isLoadingFiles || state.hasNextPage;
+    final itemCount = files.items.length + (hasFooter ? 1 : 0);
+    return ListView.builder(
+      controller: _scrollController,
+      padding: const EdgeInsets.all(8),
+      itemCount: itemCount,
+      clipBehavior: Clip.none,
+      itemBuilder: (context, index) {
+        if (index >= files.items.length) {
+          return _buildFooter(state.isLoadingFiles);
+        }
+        return ConstrainedBox(
+          constraints: const BoxConstraints(
+            minWidth: 220,
+            maxWidth: 400,
+          ),
+          child: SoundFileCard(eventModel: files.items[index]),
+        );
+      },
     );
   }
 
@@ -121,10 +135,25 @@ class _SoundFileEntriesState extends State<SoundFileEntryPage> {
     final SelectedSoundView view = _vm!;
 
     if (_scrollController.position.pixels >=
-            _scrollController.position.maxScrollExtent - 200 &&
+        _scrollController.position.maxScrollExtent - 200 &&
         view.hasNextPage &&
         !view.isLoadingFiles) {
       view.onLoadMoreSoundFiles();
     }
   }
-}
+
+  Widget _buildFooter(bool isLoading) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 12),
+      child: Center(
+        child: isLoading
+            ? const SizedBox(
+          width: 20,
+          height: 20,
+          child: CircularProgressIndicator(strokeWidth: 2),
+        )
+            : const SizedBox.shrink(),
+      ),
+    );
+  }
+}