feat(mobile): Improve timeline performance on mobile - experimental (#710)

mobile/lib/modules/home/ui/thumbnail_image.dart

@@ -15,12 +15,14 @@ class ThumbnailImage extends HookConsumerWidget {
   final AssetResponseDto asset;
   final List<AssetResponseDto> assetList;
   final bool showStorageIndicator;
+  final bool useGrayBoxPlaceholder;
 
   const ThumbnailImage({
     Key? key,
     required this.asset,
     required this.assetList,
     this.showStorageIndicator = true,
+    this.useGrayBoxPlaceholder = false,
   }) : super(key: key);
 
   @override
@@ -102,13 +104,19 @@ class ThumbnailImage extends HookConsumerWidget {
                   "Authorization": "Bearer ${box.get(accessTokenKey)}"
                 },
                 fadeInDuration: const Duration(milliseconds: 250),
-                progressIndicatorBuilder: (context, url, downloadProgress) =>
-                    Transform.scale(
-                  scale: 0.2,
-                  child: CircularProgressIndicator(
-                    value: downloadProgress.progress,
-                  ),
-                ),
+                progressIndicatorBuilder: (context, url, downloadProgress) {
+                  if (useGrayBoxPlaceholder) {
+                    return const DecoratedBox(
+                      decoration: BoxDecoration(color: Colors.grey),
+                    );
+                  }
+                  return Transform.scale(
+                    scale: 0.2,
+                    child: CircularProgressIndicator(
+                      value: downloadProgress.progress,
+                    ),
+                  );
+                },
                 errorWidget: (context, url, error) {
                   debugPrint("Error getting thumbnail $url = $error");
                   CachedNetworkImage.evictFromCache(thumbnailRequestUrl);
@@ -139,7 +147,27 @@ class ThumbnailImage extends HookConsumerWidget {
                   color: Colors.white,
                   size: 18,
                 ),
-              )
+              ),
+            if (asset.type != AssetTypeEnum.IMAGE)
+              Positioned(
+                top: 5,
+                right: 5,
+                child: Row(
+                  children: [
+                    Text(
+                      asset.duration.toString().substring(0, 7),
+                      style: const TextStyle(
+                        color: Colors.white,
+                        fontSize: 10,
+                      ),
+                    ),
+                    const Icon(
+                      Icons.play_circle_outline_rounded,
+                      color: Colors.white,
+                    ),
+                  ],
+                ),
+              ),
           ],
         ),
       ),