refactor(mobile): Use widgets in Immich asset grid (#7140)

* Refactors to use widgets in immich asset grid

Adds comments

* Fixes asset thumbnail absoluteOffset

* feat(mobile): Uses gradient image placeholders in memory lane and in the asset grid (#7142)

* Uses gradient image placeholders in memory lane and in the asset grid

* Changes to create placeholders in immmich image.thumbnail

* removed unused import

* uses context.isDarkTheme and fixed function signature for allAssetsSelected

mobile/lib/shared/ui/immich_image.dart

@@ -5,6 +5,7 @@ import 'package:flutter/services.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/asset_viewer/image_providers/immich_local_image_provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/image_providers/immich_remote_image_provider.dart';
+import 'package:immich_mobile/modules/home/ui/asset_grid/thumbnail_placeholder.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:octo_image/octo_image.dart';
@@ -17,14 +18,14 @@ class ImmichImage extends StatelessWidget {
     this.width,
     this.height,
     this.fit = BoxFit.cover,
-    this.useGrayBoxPlaceholder = false,
+    this.placeholder = const ThumbnailPlaceholder(),
     this.isThumbnail = false,
     this.thumbnailSize = 250,
     super.key,
   });
 
   final Asset? asset;
-  final bool useGrayBoxPlaceholder;
+  final Widget? placeholder;
   final double? width;
   final double? height;
   final BoxFit fit;
@@ -47,7 +48,10 @@ class ImmichImage extends StatelessWidget {
       fit: fit,
       width: width,
       height: height,
-      useGrayBoxPlaceholder: true,
+      placeholder: ThumbnailPlaceholder(
+        height: thumbnailSize.toDouble(),
+        width: thumbnailSize.toDouble(),
+      ),
       thumbnailSize: thumbnailSize,
     );
   }
@@ -99,7 +103,6 @@ class ImmichImage extends StatelessWidget {
       asset.isLocal && !Store.get(StoreKey.preferRemoteImage, false);
   @override
   Widget build(BuildContext context) {
-
     if (asset == null) {
       return Container(
         decoration: const BoxDecoration(
@@ -119,13 +122,9 @@ class ImmichImage extends StatelessWidget {
       fadeInDuration: const Duration(milliseconds: 0),
       fadeOutDuration: const Duration(milliseconds: 400),
       placeholderBuilder: (context) {
-        if (useGrayBoxPlaceholder) {
+        if (placeholder != null) {
           // Use the gray box placeholder
-          return const SizedBox.expand(
-            child: DecoratedBox(
-              decoration: BoxDecoration(color: Colors.grey),
-            ),
-          );
+          return placeholder!;
         }
         // No placeholder
         return const SizedBox();