Mobile performance improvements (#417)

* First performance tweaks (caching and rendering improvemetns)

* Revert asset response caching

* 3-step image loading in asset viewer

* Prevent panning and zooming until full-scale version is loaded

* Loading indicator

* Adapt to gallery PR

* Cleanup

* Dart format

* Fix exif sheet

* Disable three stage loading until settings are available

mobile/lib/modules/asset_viewer/views/gallery_viewer.dart

@@ -17,13 +17,13 @@ import 'package:openapi/api.dart';
 class GalleryViewerPage extends HookConsumerWidget {
   late List<AssetResponseDto> assetList;
   final AssetResponseDto asset;
-  final String thumbnailRequestUrl;
+
+  static const _threeStageLoading = false;
 
   GalleryViewerPage({
     Key? key,
     required this.assetList,
     required this.asset,
-    required this.thumbnailRequestUrl,
   }) : super(key: key);
 
   AssetResponseDto? assetDetail;
@@ -32,6 +32,7 @@ class GalleryViewerPage extends HookConsumerWidget {
     final Box<dynamic> box = Hive.box(userInfoBox);
 
     int indexOfAsset = assetList.indexOf(asset);
+    final loading = useState(false);
 
     @override
     void initState(int index) {
@@ -74,6 +75,7 @@ class GalleryViewerPage extends HookConsumerWidget {
     return Scaffold(
       backgroundColor: Colors.black,
       appBar: TopControlAppBar(
+        loading: loading.value,
         asset: assetList[indexOfAsset],
         onMoreInfoPressed: () {
           showInfo();
@@ -98,15 +100,14 @@ class GalleryViewerPage extends HookConsumerWidget {
             getAssetExif();
             if (assetList[index].type == AssetTypeEnum.IMAGE) {
               return ImageViewerPage(
-                thumbnailUrl:
-                    '${box.get(serverEndpointKey)}/asset/thumbnail/${assetList[index].id}',
-                imageUrl:
-                    '${box.get(serverEndpointKey)}/asset/file?aid=${assetList[index].deviceAssetId}&did=${assetList[index].deviceId}&isThumb=false',
                 authToken: 'Bearer ${box.get(accessTokenKey)}',
                 isZoomedFunction: isZoomedMethod,
                 isZoomedListener: isZoomedListener,
+                onLoadingCompleted: () => loading.value = false,
+                onLoadingStart: () => loading.value = _threeStageLoading,
                 asset: assetList[index],
                 heroTag: assetList[index].id,
+                threeStageLoading: _threeStageLoading
               );
             } else {
               return SwipeDetector(

mobile/lib/modules/asset_viewer/views/image_viewer_page.dart

@@ -8,27 +8,30 @@ import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/remote_photo_view.dart';
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
+import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';
 
 // ignore: must_be_immutable
 class ImageViewerPage extends HookConsumerWidget {
-  final String imageUrl;
   final String heroTag;
-  final String thumbnailUrl;
   final AssetResponseDto asset;
   final String authToken;
   final ValueNotifier<bool> isZoomedListener;
   final void Function() isZoomedFunction;
+  final void Function() onLoadingCompleted;
+  final void Function() onLoadingStart;
+  final bool threeStageLoading;
 
   ImageViewerPage({
     Key? key,
-    required this.imageUrl,
     required this.heroTag,
-    required this.thumbnailUrl,
     required this.asset,
     required this.authToken,
     required this.isZoomedFunction,
     required this.isZoomedListener,
+    required this.onLoadingCompleted,
+    required this.onLoadingStart,
+    required this.threeStageLoading,
   }) : super(key: key);
 
   AssetResponseDto? assetDetail;
@@ -68,14 +71,18 @@ class ImageViewerPage extends HookConsumerWidget {
           child: Hero(
             tag: heroTag,
             child: RemotePhotoView(
-              thumbnailUrl: thumbnailUrl,
-              imageUrl: imageUrl,
-              authToken: authToken,
-              isZoomedFunction: isZoomedFunction,
-              isZoomedListener: isZoomedListener,
-              onSwipeDown: () => AutoRouter.of(context).pop(),
-              onSwipeUp: () => showInfo(),
-            ),
+                thumbnailUrl: getThumbnailUrl(asset),
+                imageUrl: getImageUrl(asset),
+                previewUrl: threeStageLoading
+                    ? getThumbnailUrl(asset, type: ThumbnailFormat.JPEG)
+                    : null,
+                authToken: authToken,
+                isZoomedFunction: isZoomedFunction,
+                isZoomedListener: isZoomedListener,
+                onSwipeDown: () => AutoRouter.of(context).pop(),
+                onSwipeUp: () => showInfo(),
+                onLoadingCompleted: onLoadingCompleted,
+                onLoadingStart: onLoadingStart),
           ),
         ),
         if (downloadAssetStatus == DownloadAssetStatus.loading)