buttery hero animations

buttery hero animation for remote assets

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

@@ -3,7 +3,10 @@ import 'dart:ui';
 
 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> {
   static const _assetMediaRepository = AssetMediaRepository();
@@ -11,7 +14,7 @@ class LocalThumbProvider extends ImageProvider<LocalThumbProvider> {
   final String id;
   final Size size;
 
-  const LocalThumbProvider({required this.id, required this.size});
+  const LocalThumbProvider({required this.id, this.size = kTimelineThumbnailSize});
 
   @override
   Future<LocalThumbProvider> obtainKey(ImageConfiguration configuration) {
@@ -62,16 +65,25 @@ class LocalFullImageProvider extends ImageProvider<LocalFullImageProvider> {
 
   @override
   ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
-    return OneFrameImageStreamCompleter(_codec(key));
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      initialImage: getCachedImage(LocalThumbProvider(id: key.id)),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Id', key.id),
+        DiagnosticsProperty<Size>('Size', key.size),
+      ],
+    );
   }
 
-  Future<ImageInfo> _codec(LocalFullImageProvider key) 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),
     );
-    return ImageInfo(image: (await codec.getNextFrame()).image, scale: 1.0);
+    final frame = await codec.getNextFrame();
+    yield ImageInfo(image: frame.image, scale: 1.0);
   }
 
   @override