perf(mobile): store bmp thumbhash bytes in Isar

mobile/lib/shared/models/asset.dart

@@ -8,6 +8,7 @@ import 'package:openapi/api.dart';
 import 'package:photo_manager/photo_manager.dart';
 import 'package:immich_mobile/extensions/string_extensions.dart';
 import 'package:path/path.dart' as p;
+import 'package:thumbhash/thumbhash.dart' as thumbhash;
 
 part 'asset.g.dart';
 
@@ -36,7 +37,7 @@ class Asset {
         isOffline = remote.isOffline,
         stackParentId = remote.stackParentId,
         stackCount = remote.stackCount,
-        thumbhash = remote.thumbhash;
+        thumbhash = _decodeThumbhash(remote.thumbhash);
 
   Asset.local(AssetEntity local, List<int> hash)
       : localId = local.id,
@@ -118,7 +119,7 @@ class Asset {
   /// because Isar cannot sort lists of byte arrays
   String checksum;
 
-  String? thumbhash;
+  List<byte>? thumbhash;
 
   @Index(unique: false, replace: false, type: IndexType.hash)
   String? remoteId;
@@ -374,7 +375,7 @@ class Asset {
     ExifInfo? exifInfo,
     String? stackParentId,
     int? stackCount,
-    String? thumbhash,
+    List<byte>? thumbhash,
   }) =>
       Asset(
         id: id ?? this.id,
@@ -512,3 +513,12 @@ extension AssetsHelper on IsarCollection<Asset> {
     return where().anyOf(ids, (q, String e) => q.localIdEqualTo(e));
   }
 }
+
+List<byte>? _decodeThumbhash(String? hash) {
+  if (hash == null) {
+    return null;
+  }
+  final hashBytes = base64.decode(base64.normalize(hash));
+  final rgbaImage = thumbhash.thumbHashToRGBA(hashBytes);
+  return thumbhash.rgbaToBmp(rgbaImage).toList();
+}

mobile/lib/shared/ui/immich_image.dart

@@ -1,5 +1,3 @@
-import 'dart:convert';
-
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
@@ -10,7 +8,6 @@ import 'package:immich_mobile/shared/models/store.dart';
 import 'package:openapi/api.dart' as api;
 import 'package:photo_manager/photo_manager.dart';
 import 'package:photo_manager_image_provider/photo_manager_image_provider.dart';
-import 'package:thumbhash/thumbhash.dart' as thumbhash;
 
 /// Renders an Asset using local data if available, else remote data
 class ImmichImage extends StatefulWidget {
@@ -114,20 +111,16 @@ class ImmichImage extends StatefulWidget {
 }
 
 class _ImmichImageState extends State<ImmichImage> {
+  // Creating the Uint8List from the List<bytes> during each build results in flickers during
+  // the fade transition. Calculate the hash in the initState and cache it for further builds
   Uint8List? thumbHash;
   static const _placeholderDimension = 300.0;
 
-  void decodeThumbHash(String hash) {
-    final hashBytes = base64.decode(base64.normalize(hash));
-    final rgbaImage = thumbhash.thumbHashToRGBA(hashBytes);
-    thumbHash = thumbhash.rgbaToBmp(rgbaImage);
-  }
-
   @override
   void initState() {
     super.initState();
     if (widget.asset?.thumbhash != null) {
-      decodeThumbHash(widget.asset!.thumbhash!);
+      thumbHash = Uint8List.fromList(widget.asset!.thumbhash!);
     }
   }