[mobile][photos] Fix missing hero animation (#1064)

## Description

Sometimes, when opening an image from gallery, the hero animation fails
to happen. This PR fixes this issue.



https://github.com/ente-io/ente/assets/77285023/2ee40ec8-58d0-4ca1-82fb-1be96581137b



## Tests

- [x] Didn't break hero animations of videos, it almost stays the same.

mobile/lib/ui/viewer/file/zoomable_image.dart

@@ -104,6 +104,40 @@ class _ZoomableImageState extends State<ZoomableImage> {
             tag: widget.tagPrefix! + _photo.tag,
           ),
           backgroundDecoration: widget.backgroundDecoration as BoxDecoration?,
+          loadingBuilder: (context, event) {
+            // This is to make sure the hero anitmation animates and fits in the
+            //dimensions of the image on screen.
+            final screenDimensions = MediaQuery.sizeOf(context);
+            late final double screenRelativeImageWidth;
+            late final double screenRelativeImageHeight;
+            final screenWidth = screenDimensions.width;
+            final screenHeight = screenDimensions.height;
+
+            final aspectRatioOfScreen = screenWidth / screenHeight;
+            final aspectRatioOfImage = _photo.width / _photo.height;
+
+            if (aspectRatioOfImage > aspectRatioOfScreen) {
+              screenRelativeImageWidth = screenWidth;
+              screenRelativeImageHeight = screenWidth / aspectRatioOfImage;
+            } else if (aspectRatioOfImage < aspectRatioOfScreen) {
+              screenRelativeImageHeight = screenHeight;
+              screenRelativeImageWidth = screenHeight * aspectRatioOfImage;
+            } else {
+              screenRelativeImageWidth = screenWidth;
+              screenRelativeImageHeight = screenHeight;
+            }
+
+            return Center(
+              child: SizedBox(
+                width: screenRelativeImageWidth,
+                height: screenRelativeImageHeight,
+                child: Hero(
+                  tag: widget.tagPrefix! + _photo.tag,
+                  child: const EnteLoadingWidget(),
+                ),
+              ),
+            );
+          },
         ),
       );
     } else {

mobile/lib/ui/viewer/gallery/component/gallery_file_widget.dart

@@ -73,6 +73,14 @@ class GalleryFileWidget extends StatelessWidget {
             borderRadius: BorderRadius.circular(1),
             child: Hero(
               tag: heroTag,
+              flightShuttleBuilder: (
+                flightContext,
+                animation,
+                flightDirection,
+                fromHeroContext,
+                toHeroContext,
+              ) =>
+                  thumbnailWidget,
               transitionOnUserGestures: true,
               child: isFileSelected
                   ? ColorFiltered(