buttery hero animation for remote assets

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -472,10 +472,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     if (stackChildren != null && stackChildren.isNotEmpty) {
       asset = stackChildren.elementAt(ref.read(assetViewerProvider.select((s) => s.stackIndex)));
     }
-    return Hero(
+    return Thumbnail.fromBaseAsset(asset: asset, fit: BoxFit.contain);
-      tag: '${asset.heroTag}_$heroOffset',
-      child: Thumbnail.fromBaseAsset(asset: asset, fit: BoxFit.contain),
-    );
   }
 
   void _onScaleStateChanged(PhotoViewScaleState scaleState) {

mobile/lib/presentation/widgets/images/local_image_provider.dart

@@ -5,6 +5,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/infrastructure/repositories/asset_media.repository.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
 
 class LocalThumbProvider extends ImageProvider<LocalThumbProvider> {
@@ -64,29 +65,9 @@ class LocalFullImageProvider extends ImageProvider<LocalFullImageProvider> {
 
   @override
   ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
-    ImageInfo? thumbnail;
-    final thumbnailProvider = LocalThumbProvider(id: key.id);
-
-    final ImageStreamCompleter? stream = PaintingBinding.instance.imageCache.putIfAbsent(
-      thumbnailProvider,
-      () => throw Exception(), // don't bother loading the thumbnail if it isn't cacched
-    );
-
-    if (stream != null) {
-      void listener(ImageInfo info, bool synchronousCall) {
-        thumbnail = info;
-      }
-
-      try {
-        stream.addListener(ImageStreamListener(listener));
-      } finally {
-        stream.removeListener(ImageStreamListener(listener));
-      }
-    }
-
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
-      initialImage: thumbnail,
+      initialImage: getCachedImage(LocalThumbProvider(id: key.id)),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Id', key.id),
@@ -95,14 +76,14 @@ class LocalFullImageProvider extends ImageProvider<LocalFullImageProvider> {
     );
   }
 
-  Future<ImageInfo> _codec(LocalFullImageProvider key, ImageDecoderCallback decode) async {
+  Stream<ImageInfo> _codec(LocalFullImageProvider key, ImageDecoderCallback decode) async* {
     final devicePixelRatio = PlatformDispatcher.instance.views.first.devicePixelRatio;
     final codec = await _assetMediaRepository.getLocalThumbnail(
       key.id,
       Size(size.width * devicePixelRatio, size.height * devicePixelRatio),
     );
     final frame = await codec.getNextFrame();
-    return ImageInfo(image: frame.image, scale: 1.0);
+    yield ImageInfo(image: frame.image, scale: 1.0);
   }
 
   @override

mobile/lib/presentation/widgets/images/remote_image_provider.dart

@@ -6,7 +6,6 @@ import 'package:flutter/painting.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/domain/services/setting.service.dart';
-import 'package:immich_mobile/extensions/codec_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
 import 'package:immich_mobile/providers/image/cache/image_loader.dart';
@@ -27,11 +26,9 @@ class RemoteThumbProvider extends ImageProvider<RemoteThumbProvider> {
   @override
   ImageStreamCompleter loadImage(RemoteThumbProvider key, ImageDecoderCallback decode) {
     final cache = cacheManager ?? RemoteImageCacheManager();
-    final chunkController = StreamController<ImageChunkEvent>();
     return MultiFrameImageStreamCompleter(
-      codec: _codec(key, cache, decode, chunkController),
+      codec: _codec(key, cache, decode),
       scale: 1.0,
-      chunkEvents: chunkController.stream,
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Asset Id', key.assetId),
@@ -39,20 +36,10 @@ class RemoteThumbProvider extends ImageProvider<RemoteThumbProvider> {
     );
   }
 
-  Future<Codec> _codec(
+  Future<Codec> _codec(RemoteThumbProvider key, CacheManager cache, ImageDecoderCallback decode) async {
-    RemoteThumbProvider key,
-    CacheManager cache,
-    ImageDecoderCallback decode,
-    StreamController<ImageChunkEvent> chunkController,
-  ) async {
     final preview = getThumbnailUrlForRemoteId(key.assetId);
 
-    return ImageLoader.loadImageFromCache(
+    return ImageLoader.loadImageFromCache(preview, cache: cache, decode: decode);
-      preview,
-      cache: cache,
-      decode: decode,
-      chunkEvents: chunkController,
-    ).whenComplete(chunkController.close);
   }
 
   @override
@@ -85,25 +72,36 @@ class RemoteFullImageProvider extends ImageProvider<RemoteFullImageProvider> {
     final cache = cacheManager ?? RemoteImageCacheManager();
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, cache, decode),
-      initialImage: getCachedImage(RemoteThumbProvider(assetId: key.assetId)),
+      initialImage: getCachedImage(RemoteThumbProvider(assetId: assetId)),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Asset Id', key.assetId),
+      ],
     );
   }
 
   Stream<ImageInfo> _codec(RemoteFullImageProvider key, CacheManager cache, ImageDecoderCallback decode) async* {
-    final codec = await ImageLoader.loadImageFromCache(
+    ImageInfo? imageInfo;
-      getPreviewUrlForRemoteId(key.assetId),
+    final originalImageFuture = AppSetting.get(Setting.loadOriginal)
-      cache: cache,
+        ? ImageLoader.loadImageFromCache(
-      decode: decode,
+            getOriginalUrlForRemoteId(key.assetId),
-    );
+            cache: cache,
-    yield await codec.getImageInfo();
+            decode: decode,
+          ).then((image) => image.getNextFrame()).then((frame) => imageInfo = ImageInfo(image: frame.image, scale: 1.0))
+        : null;
 
-    if (AppSetting.get(Setting.loadOriginal)) {
+    final previewImageFuture =
-      final codec = await ImageLoader.loadImageFromCache(
+        ImageLoader.loadImageFromCache(getPreviewUrlForRemoteId(key.assetId), cache: cache, decode: decode)
-        getOriginalUrlForRemoteId(key.assetId),
+            .then((image) async => imageInfo == null ? await image.getNextFrame() : null)
-        cache: cache,
+            .then((frame) => imageInfo == null ? ImageInfo(image: frame!.image, scale: 1.0) : null);
-        decode: decode,
+
-      );
+    final previewImage = await previewImageFuture;
-      yield await codec.getImageInfo();
+    if (previewImage != null) {
+      yield previewImage;
+    }
+
+    if (originalImageFuture != null) {
+      yield await originalImageFuture;
     }
   }