From eb3fcfdd6fee6e8a1f6384c19fb97f5a28b22267 Mon Sep 17 00:00:00 2001
From: Kingkor Roy Tirtho <krtirtho@gmail.com>
Date: Fri, 1 Aug 2025 23:28:54 +0600
Subject: [PATCH] chore: add animation for browse sections loadingb

---
 lib/modules/home/sections/sections.dart | 37 ++++++++++++++++++++++++-
 pubspec.yaml                            |  1 +
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/lib/modules/home/sections/sections.dart b/lib/modules/home/sections/sections.dart
index cc7a7fad..cffbaf9e 100644
--- a/lib/modules/home/sections/sections.dart
+++ b/lib/modules/home/sections/sections.dart
@@ -5,6 +5,9 @@ import 'package:spotube/collections/routes.gr.dart';
 import 'package:spotube/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/metadata_plugin/browse/sections.dart';
+import 'package:spotube/provider/metadata_plugin/utils/common.dart';
+import 'package:very_good_infinite_list/very_good_infinite_list.dart';
+import 'package:flutter_undraw/flutter_undraw.dart';
 
 class HomePageBrowseSection extends HookConsumerWidget {
   const HomePageBrowseSection({super.key});
@@ -13,8 +16,40 @@ class HomePageBrowseSection extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final browseSections = ref.watch(metadataPluginBrowseSectionsProvider);
     final sections = browseSections.asData?.value.items;
+    final ThemeData(:colorScheme) = Theme.of(context);
 
-    return SliverList.builder(
+    if (browseSections.isLoading) {
+      return SliverToBoxAdapter(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          spacing: 16,
+          children: [
+            Undraw(
+              height: 200,
+              illustration: UndrawIllustration.process,
+              color: colorScheme.primary,
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              spacing: 8,
+              children: [
+                const CircularProgressIndicator(),
+                const Text("Building your timeline based on your listenings...")
+                    .muted,
+              ],
+            ),
+            const Gap(16),
+          ],
+        ),
+      );
+    }
+
+    return SliverInfiniteList(
+      hasReachedMax: browseSections.asData?.value.hasMore == false,
+      isLoading: !browseSections.isLoading && browseSections.isLoadingNextPage,
+      onFetchData: () {
+        ref.read(metadataPluginBrowseSectionsProvider.notifier).fetchMore();
+      },
       itemCount: sections?.length ?? 0,
       itemBuilder: (context, index) {
         final section = sections![index];
diff --git a/pubspec.yaml b/pubspec.yaml
index ed05a226..4ce97201 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -216,6 +216,7 @@ flutter:
     - packages/flutter_undraw/assets/undraw/taken.svg
     - packages/flutter_undraw/assets/undraw/empty.svg
     - packages/flutter_undraw/assets/undraw/no_data.svg
+    - packages/flutter_undraw/assets/undraw/process.svg
     # hetu script bytecode
     - packages/hetu_std/assets/bytecode/std.out
     - packages/hetu_otp_util/assets/bytecode/otp_util.out