🚧 Add: shimmer loader for top searches

devaryakjha · Oct 23, 2023 · ee282a4 · ee282a4
1 parent e64f785
commit ee282a4
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 26 deletions.
diff --git a/lib/features/search/data/search_repository.dart b/lib/features/search/data/search_repository.dart
@@ -2,7 +2,6 @@ import 'package:hive/hive.dart';
 import 'package:varanasi_mobile_app/features/search/data/search_data_provider.dart';
 import 'package:varanasi_mobile_app/features/search/data/top_search_result/top_search_result.dart';
 import 'package:varanasi_mobile_app/utils/constants/strings.dart';
-import 'package:varanasi_mobile_app/utils/convert_nested_map.dart';
 import 'package:varanasi_mobile_app/utils/logger.dart';
 import 'package:varanasi_mobile_app/utils/mixins/cachable_mixin.dart';
 
@@ -28,30 +27,8 @@ class SearchRepository with CacheableService {
   final Map<String, SearchResult> _searchResultsCache = {};
 
   Future<TopSearchResult?> fetchTopSearchResults() async {
-    await initcache().then((value) {
-      if (value == null) return;
-      _box = value;
-    });
-    final cached = maybeGetCached(AppStrings.topSearchesCacheKey);
-    if (cached != null) {
-      try {
-        final cachemap = convertNestedMap(cached);
-        final library =
-            SearchDataProvider.instance.parseTopSearchResult(cachemap);
-        return library;
-      } catch (e) {
-        /// If the cached data is corrupted, delete it
-        _logger.e(e);
-        deleteCache(AppStrings.topSearchesCacheKey);
-      }
-    }
-    final (response, searchResults) =
+    final (_, searchResults) =
         await SearchDataProvider.instance.fetchTopSearchResults();
-    if (searchResults != null) {
-      cache(AppStrings.topSearchesCacheKey, response, const Duration(hours: 1));
-    } else {
-      throw Exception('Failed to fetch top searches');
-    }
     return searchResults;
   }
 

diff --git a/lib/features/search/ui/widgets/trending_searches_carousel.dart b/lib/features/search/ui/widgets/trending_searches_carousel.dart
@@ -3,14 +3,66 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:varanasi_mobile_app/features/home/ui/home_widgets/media_carousel/media_carousel.dart';
 import 'package:varanasi_mobile_app/features/search/cubit/search_cubit.dart';
 import 'package:varanasi_mobile_app/models/media_playlist.dart';
+import 'package:varanasi_mobile_app/utils/extensions/theme.dart';
+import 'package:varanasi_mobile_app/widgets/shimmer_loader.dart';
 
 class TrendingSearchesCarousel extends StatelessWidget {
   const TrendingSearchesCarousel({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final trendingSearches = context
-        .select((SearchCubit cubit) => cubit.state.topSearchResult?.data ?? []);
+    final (trendingSearches, isFetchingTopSearchResults) = context.select(
+        (SearchCubit cubit) => (
+              cubit.state.topSearchResult?.data ?? [],
+              cubit.state.isFetchingTopSearchResults
+            ));
+    if (isFetchingTopSearchResults) {
+      return SliverToBoxAdapter(
+        child: SizedBox(
+          height: 220,
+          child: Column(
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(left: 8),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text(
+                      'Trending Searches',
+                      style: context.textTheme.titleLarge
+                          ?.copyWith(fontWeight: FontWeight.bold),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 16),
+              SizedBox(
+                height: 140,
+                child: ListView.separated(
+                  physics: const NeverScrollableScrollPhysics(),
+                  shrinkWrap: true,
+                  itemCount: 10,
+                  itemBuilder: (context, index) => ShimmerLoader(
+                    height: 120,
+                    width: 140,
+                    margin: index == 0
+                        ? const EdgeInsets.only(left: 8)
+                        : index == 19
+                            ? const EdgeInsets.only(right: 8)
+                            : EdgeInsets.zero,
+                    decoration:
+                        BoxDecoration(borderRadius: BorderRadius.circular(8)),
+                  ),
+                  separatorBuilder: (context, index) =>
+                      const SizedBox(width: 16),
+                  scrollDirection: Axis.horizontal,
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
+    }
     return SliverToBoxAdapter(
       child: MediaCarousel(
         playlist: MediaPlaylist(