refactor: Move back to cached network image for better avatar performance

lib/pages/chat/events/image_bubble.dart

@@ -1,13 +1,16 @@
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
 
 import 'package:matrix/matrix.dart';
 
 import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/image_viewer/image_viewer.dart';
-import 'package:fluffychat/widgets/mxc_image.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_file_extension.dart';
 import '../../../widgets/blur_hash.dart';
 
-class ImageBubble extends StatelessWidget {
+class ImageBubble extends StatefulWidget {
   final Event event;
   final bool tapToView;
   final BoxFit fit;
@@ -15,11 +18,11 @@ class ImageBubble extends StatelessWidget {
   final Color? backgroundColor;
   final bool thumbnailOnly;
   final bool animated;
-  final double width;
-  final double height;
+  final double? width;
+  final double? height;
   final void Function()? onTap;
   final BorderRadius? borderRadius;
-
+  final Duration retryDuration;
   const ImageBubble(
     this.event, {
     this.tapToView = true,
@@ -32,50 +35,102 @@ class ImageBubble extends StatelessWidget {
     this.animated = false,
     this.onTap,
     this.borderRadius,
+    this.retryDuration = const Duration(seconds: 2),
     super.key,
   });
 
+  @override
+  State<ImageBubble> createState() => _ImageBubbleState();
+}
+
+class _ImageBubbleState extends State<ImageBubble> {
+  Uint8List? _imageData;
+
+  Future<void> _load() async {
+    final data = await widget.event.downloadAndDecryptAttachment(
+      getThumbnail: widget.thumbnailOnly,
+    );
+    if (data.detectFileType is MatrixImageFile) {
+      if (!mounted) return;
+      setState(() {
+        _imageData = data.bytes;
+      });
+      return;
+    }
+  }
+
+  void _tryLoad([_]) async {
+    if (_imageData != null) {
+      return;
+    }
+    try {
+      await _load();
+    } catch (_) {
+      if (!mounted) return;
+      await Future.delayed(widget.retryDuration);
+      _tryLoad();
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _tryLoad();
+  }
+
   Widget _buildPlaceholder(BuildContext context) {
+    final width = widget.width;
+    final height = widget.height;
+    if (width == null || height == null) {
+      return const Center(
+        child: CircularProgressIndicator.adaptive(
+          strokeWidth: 2,
+        ),
+      );
+    }
     final String blurHashString =
-        event.infoMap['xyz.amorgan.blurhash'] is String
-            ? event.infoMap['xyz.amorgan.blurhash']
+        widget.event.infoMap['xyz.amorgan.blurhash'] is String
+            ? widget.event.infoMap['xyz.amorgan.blurhash']
             : 'LEHV6nWB2yk8pyo0adR*.7kCMdnj';
+
     return SizedBox(
-      width: width,
-      height: height,
+      width: widget.width,
+      height: widget.height,
       child: BlurHash(
         blurhash: blurHashString,
         width: width,
         height: height,
-        fit: fit,
+        fit: widget.fit,
       ),
     );
   }
 
   void _onTap(BuildContext context) {
-    if (onTap != null) {
-      onTap!();
+    if (widget.onTap != null) {
+      widget.onTap!();
       return;
     }
-    if (!tapToView) return;
+    if (!widget.tapToView) return;
     showDialog(
       context: context,
       useRootNavigator: false,
-      builder: (_) => ImageViewer(event),
+      builder: (_) => ImageViewer(widget.event),
     );
   }
 
   @override
   Widget build(BuildContext context) {
     final borderRadius =
-        this.borderRadius ?? BorderRadius.circular(AppConfig.borderRadius);
+        widget.borderRadius ?? BorderRadius.circular(AppConfig.borderRadius);
+    final data = _imageData;
+    final hasData = data != null;
     return Material(
       color: Colors.transparent,
       clipBehavior: Clip.hardEdge,
       shape: RoundedRectangleBorder(
         borderRadius: borderRadius,
         side: BorderSide(
-          color: event.messageType == MessageTypes.Sticker
+          color: widget.event.messageType == MessageTypes.Sticker
               ? Colors.transparent
               : Theme.of(context).dividerColor,
         ),
@@ -84,17 +139,31 @@ class ImageBubble extends StatelessWidget {
         onTap: () => _onTap(context),
         borderRadius: borderRadius,
         child: Hero(
-          tag: event.eventId,
-          child: MxcImage(
-            event: event,
-            width: width,
-            height: height,
-            fit: fit,
-            animated: animated,
-            isThumbnail: thumbnailOnly,
-            placeholder: event.messageType == MessageTypes.Sticker
-                ? null
-                : _buildPlaceholder,
+          tag: widget.event.eventId,
+          child: AnimatedCrossFade(
+            crossFadeState:
+                hasData ? CrossFadeState.showSecond : CrossFadeState.showFirst,
+            duration: FluffyThemes.animationDuration,
+            firstChild: _buildPlaceholder(context),
+            secondChild: hasData
+                ? Image.memory(
+                    data,
+                    width: widget.width,
+                    height: widget.height,
+                    fit: widget.fit,
+                    filterQuality: widget.thumbnailOnly
+                        ? FilterQuality.low
+                        : FilterQuality.medium,
+                    errorBuilder: (context, __, ___) {
+                      _imageData = null;
+                      WidgetsBinding.instance.addPostFrameCallback(_tryLoad);
+                      return _buildPlaceholder(context);
+                    },
+                  )
+                : SizedBox(
+                    width: widget.width,
+                    height: widget.height,
+                  ),
           ),
         ),
       ),

lib/pages/image_viewer/image_viewer_view.dart

@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 
+import 'package:fluffychat/pages/chat/events/image_bubble.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
-import 'package:fluffychat/widgets/mxc_image.dart';
 import 'image_viewer.dart';
 
 class ImageViewerView extends StatelessWidget {
@@ -55,14 +55,13 @@ class ImageViewerView extends StatelessWidget {
         maxScale: 10.0,
         onInteractionEnd: controller.onInteractionEnds,
         child: Center(
-          child: Hero(
-            tag: controller.widget.event.eventId,
-            child: MxcImage(
-              event: controller.widget.event,
-              fit: BoxFit.contain,
-              isThumbnail: false,
-              animated: true,
-            ),
+          child: ImageBubble(
+            controller.widget.event,
+            fit: BoxFit.contain,
+            animated: true,
+            thumbnailOnly: false,
+            width: null,
+            height: null,
           ),
         ),
       ),