chore: improve carousel performance

KRTirtho · Jan 6, 2025 · 3ffcb48 · 3ffcb48
1 parent 4685254
commit 3ffcb48
Showing 1 changed file with 83 additions and 89 deletions.
diff --git a/lib/modules/home/sections/genres.dart b/lib/modules/home/sections/genres.dart
@@ -31,12 +31,12 @@ class HomeGenresSection extends HookConsumerWidget {
       () =>
           categoriesQuery.asData?.value
               .where((c) => (c.icons?.length ?? 0) > 0)
-              .take(mediaQuery.mdAndDown ? 6 : 10)
+              .take(6)
               .toList() ??
           [
             FakeData.category,
           ],
-      [mediaQuery.mdAndDown, categoriesQuery.asData?.value],
+      [categoriesQuery.asData?.value],
     );
     final controller = useMemoized(() => CarouselController(), []);
     final interactedRef = useRef(false);
@@ -159,101 +159,95 @@ class HomeGenresSection extends HookConsumerWidget {
                           child: Skeleton.ignore(
                             child: Skeletonizer(
                               enabled: playlists.isLoading,
-                              child: SingleChildScrollView(
+                              child: ListView.separated(
                                 scrollDirection: Axis.horizontal,
-                                child: Row(
-                                  spacing: 12,
-                                  mainAxisAlignment: MainAxisAlignment.center,
-                                  children: [
-                                    for (final playlist in playlistsData)
-                                      Container(
-                                        width: 115 * theme.scaling,
-                                        decoration: BoxDecoration(
-                                          color: theme.colorScheme.background
-                                              .withAlpha(75),
-                                          borderRadius: theme.borderRadiusMd,
-                                        ),
-                                        child: SurfaceBlur(
-                                          borderRadius: theme.borderRadiusMd,
-                                          surfaceBlur: theme.surfaceBlur,
-                                          child: Button(
-                                            style: ButtonVariance.secondary
-                                                .copyWith(
-                                              padding:
-                                                  (context, states, value) =>
-                                                      const EdgeInsets.all(8),
-                                              decoration:
-                                                  (context, states, value) {
-                                                final decoration =
-                                                    ButtonVariance.secondary
-                                                            .decoration(
-                                                                context, states)
-                                                        as BoxDecoration;
+                                itemCount: playlistsData.length,
+                                separatorBuilder: (context, index) =>
+                                    const Gap(12),
+                                itemBuilder: (context, index) {
+                                  final playlist =
+                                      playlistsData.elementAt(index);
 
-                                                if (states.isNotEmpty) {
-                                                  return decoration;
-                                                }
+                                  return Container(
+                                    width: 115 * theme.scaling,
+                                    decoration: BoxDecoration(
+                                      color: theme.colorScheme.background
+                                          .withAlpha(75),
+                                      borderRadius: theme.borderRadiusMd,
+                                    ),
+                                    child: SurfaceBlur(
+                                      borderRadius: theme.borderRadiusMd,
+                                      surfaceBlur: theme.surfaceBlur,
+                                      child: Button(
+                                        style:
+                                            ButtonVariance.secondary.copyWith(
+                                          padding: (context, states, value) =>
+                                              const EdgeInsets.all(8),
+                                          decoration: (context, states, value) {
+                                            final decoration = ButtonVariance
+                                                    .secondary
+                                                    .decoration(context, states)
+                                                as BoxDecoration;
 
-                                                return decoration.copyWith(
-                                                  color: decoration.color
-                                                      ?.withAlpha(180),
-                                                );
-                                              },
-                                            ),
-                                            onPressed: () {
-                                              context.pushNamed(
-                                                PlaylistPage.name,
-                                                pathParameters: {
-                                                  "id": playlist.id!,
-                                                },
-                                                extra: playlist,
-                                              );
+                                            if (states.isNotEmpty) {
+                                              return decoration;
+                                            }
+
+                                            return decoration.copyWith(
+                                              color: decoration.color
+                                                  ?.withAlpha(180),
+                                            );
+                                          },
+                                        ),
+                                        onPressed: () {
+                                          context.pushNamed(
+                                            PlaylistPage.name,
+                                            pathParameters: {
+                                              "id": playlist.id!,
                                             },
-                                            child: Column(
-                                              crossAxisAlignment:
-                                                  CrossAxisAlignment.start,
-                                              spacing: 5,
-                                              children: [
-                                                ClipRRect(
-                                                  borderRadius:
-                                                      theme.borderRadiusSm,
-                                                  child: UniversalImage(
-                                                    path: (playlist.images)!
-                                                        .asUrlString(
-                                                      placeholder:
-                                                          ImagePlaceholder
-                                                              .collection,
-                                                      index: 1,
-                                                    ),
-                                                    fit: BoxFit.cover,
-                                                    height: 100 * theme.scaling,
-                                                    width: 100 * theme.scaling,
-                                                  ),
+                                            extra: playlist,
+                                          );
+                                        },
+                                        child: Column(
+                                          crossAxisAlignment:
+                                              CrossAxisAlignment.start,
+                                          spacing: 5,
+                                          children: [
+                                            ClipRRect(
+                                              borderRadius:
+                                                  theme.borderRadiusSm,
+                                              child: UniversalImage(
+                                                path: (playlist.images)!
+                                                    .asUrlString(
+                                                  placeholder: ImagePlaceholder
+                                                      .collection,
+                                                  index: 1,
                                                 ),
-                                                Text(
-                                                  playlist.name!,
-                                                  maxLines: 2,
-                                                  overflow:
-                                                      TextOverflow.ellipsis,
-                                                ).semiBold().small(),
-                                                if (playlist.description !=
-                                                    null)
-                                                  Text(
-                                                    playlist.description
-                                                            ?.unescapeHtml()
-                                                            .cleanHtml() ??
-                                                        "",
-                                                    maxLines: 2,
-                                                    overflow:
-                                                        TextOverflow.ellipsis,
-                                                  ).xSmall().muted(),
-                                              ],
+                                                fit: BoxFit.cover,
+                                                height: 100 * theme.scaling,
+                                                width: 100 * theme.scaling,
+                                              ),
                                             ),
-                                          ),
+                                            Text(
+                                              playlist.name!,
+                                              maxLines: 2,
+                                              overflow: TextOverflow.ellipsis,
+                                            ).semiBold().small(),
+                                            if (playlist.description != null)
+                                              Text(
+                                                playlist.description
+                                                        ?.unescapeHtml()
+                                                        .cleanHtml() ??
+                                                    "",
+                                                maxLines: 2,
+                                                overflow: TextOverflow.ellipsis,
+                                              ).xSmall().muted(),
+                                          ],
                                         ),
                                       ),
-                                  ],
-                                ),
+                                    ),
+                                  );
+                                },
                               ),
                             ),
                           ),