Merge pull request #812 from ente-io/fix_gallery

Prevent wasteful thumbnail fetch requests

lib/ui/collections/collection_item_widget.dart

@@ -4,18 +4,22 @@ import 'package:photos/models/collection.dart';
 import 'package:photos/models/collection_items.dart';
 import 'package:photos/models/gallery_type.dart';
 import 'package:photos/theme/ente_theme.dart';
+import 'package:photos/ui/viewer/file/file_icons_widget.dart';
 import 'package:photos/ui/viewer/file/no_thumbnail_widget.dart';
 import 'package:photos/ui/viewer/file/thumbnail_widget.dart';
 import 'package:photos/ui/viewer/gallery/collection_page.dart';
 import 'package:photos/utils/navigation_util.dart';
+import 'package:visibility_detector/visibility_detector.dart';
 
 class CollectionItem extends StatelessWidget {
   final CollectionWithThumbnail c;
   final double sideOfThumbnail;
+  final bool shouldRender;
 
   CollectionItem(
     this.c,
     this.sideOfThumbnail, {
+    this.shouldRender = false,
     Key? key,
   }) : super(key: Key(c.collection.id.toString()));
 
@@ -39,11 +43,10 @@ class CollectionItem extends StatelessWidget {
                   child: Hero(
                     tag: heroTag,
                     child: c.thumbnail != null
-                        ? ThumbnailWidget(
-                            c.thumbnail,
-                            shouldShowArchiveStatus: c.collection.isArchived(),
-                            showFavForAlbumOnly: true,
-                            key: Key(heroTag),
+                        ? CollectionItemThumbnailWidget(
+                            c: c,
+                            heroTag: heroTag,
+                            shouldRender: shouldRender,
                           )
                         : const NoThumbnailWidget(),
                   ),
@@ -98,3 +101,54 @@ class CollectionItem extends StatelessWidget {
     );
   }
 }
+
+class CollectionItemThumbnailWidget extends StatefulWidget {
+  const CollectionItemThumbnailWidget({
+    Key? key,
+    required this.c,
+    required this.heroTag,
+    this.shouldRender = false,
+  }) : super(key: key);
+
+  final CollectionWithThumbnail c;
+  final String heroTag;
+  final bool shouldRender;
+
+  @override
+  State<CollectionItemThumbnailWidget> createState() =>
+      _CollectionItemThumbnailWidgetState();
+}
+
+class _CollectionItemThumbnailWidgetState
+    extends State<CollectionItemThumbnailWidget> {
+  bool _shouldRender = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _shouldRender = widget.shouldRender;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return VisibilityDetector(
+      key: Key("collection_item" + widget.c.thumbnail!.tag),
+      onVisibilityChanged: (visibility) {
+        final shouldRender = visibility.visibleFraction > 0;
+        if (mounted && shouldRender && !_shouldRender) {
+          setState(() {
+            _shouldRender = shouldRender;
+          });
+        }
+      },
+      child: _shouldRender
+          ? ThumbnailWidget(
+              widget.c.thumbnail,
+              shouldShowArchiveStatus: widget.c.collection.isArchived(),
+              showFavForAlbumOnly: true,
+              key: Key(widget.heroTag),
+            )
+          : const ThumbnailPlaceHolder(),
+    );
+  }
+}

lib/ui/collections/remote_collections_grid_view_widget.dart

@@ -14,6 +14,7 @@ class RemoteCollectionsGridViewWidget extends StatelessWidget {
   static const maxThumbnailWidth = 224.0;
   static const fixedGapBetweenAlbum = 8.0;
   static const minGapForHorizontalPadding = 8.0;
+  static const collectionItemsToPreload = 20;
 
   final List<CollectionWithThumbnail>? collections;
 
@@ -45,7 +46,11 @@ class RemoteCollectionsGridViewWidget extends StatelessWidget {
         // to disable GridView's scrolling
         itemBuilder: (context, index) {
           if (index < collections!.length) {
-            return CollectionItem(collections![index], sideOfThumbnail);
+            return CollectionItem(
+              collections![index],
+              sideOfThumbnail,
+              shouldRender: index < collectionItemsToPreload,
+            );
           } else {
             return const CreateNewAlbumWidget();
           }

lib/ui/huge_listview/lazy_loading_gallery.dart

@@ -352,7 +352,7 @@ class _LazyLoadingGridViewState extends State<LazyLoadingGridView> {
 
   Widget _getRecyclableView() {
     return VisibilityDetector(
-      key: UniqueKey(),
+      key: Key("gallery" + widget.filesInDay.first.tag),
       onVisibilityChanged: (visibility) {
         final shouldRender = visibility.visibleFraction > 0;
         if (mounted && shouldRender != _shouldRender) {
@@ -370,7 +370,7 @@ class _LazyLoadingGridViewState extends State<LazyLoadingGridView> {
   Widget _getNonRecyclableView() {
     if (!_shouldRender!) {
       return VisibilityDetector(
-        key: UniqueKey(),
+        key: Key("gallery" + widget.filesInDay.first.tag),
         onVisibilityChanged: (visibility) {
           if (mounted && visibility.visibleFraction > 0 && !_shouldRender!) {
             setState(() {