fix: generate image thumbnails and use transparent image as placeholder for cached network images (#310)

packages/stream_chat_flutter/lib/src/attachment/file_attachment.dart

@@ -5,6 +5,7 @@ import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/utils.dart';
 import 'package:stream_chat_flutter/src/video_thumbnail_image.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
+import 'package:transparent_image/transparent_image.dart';
 
 import '../upload_progress_indicator.dart';
 import 'attachment_widget.dart';
@@ -102,13 +103,11 @@ class FileAttachment extends AttachmentWidget {
             errorWidget: (_, obj, trace) {
               return getFileTypeImage(attachment.extraData['other']);
             },
-            progressIndicatorBuilder: (context, _, progress) {
-              return Center(
-                child: Container(
-                  width: 20.0,
-                  height: 20.0,
-                  child: const CircularProgressIndicator(),
-                ),
+            placeholder: (_, __) {
+              return Container(
+                width: size?.width,
+                height: size?.height,
+                child: Image.memory(kTransparentImage),
               );
             },
           ),

packages/stream_chat_flutter/lib/src/attachment/giphy_attachment.dart

@@ -1,6 +1,9 @@
+import 'dart:typed_data';
+
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
+import 'package:transparent_image/transparent_image.dart';
 
 import '../full_screen_media.dart';
 import '../stream_chat_theme.dart';
@@ -348,9 +351,7 @@ class GiphyAttachment extends AttachmentWidget {
                 return Container(
                   width: size?.width,
                   height: size?.height,
-                  child: Center(
-                    child: CircularProgressIndicator(),
-                  ),
+                  child: Image.memory(kTransparentImage),
                 );
               },
               imageUrl: imageUrl,

packages/stream_chat_flutter/lib/src/attachment/image_attachment.dart

@@ -2,6 +2,7 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/attachment/attachment_upload_state_builder.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
+import 'package:transparent_image/transparent_image.dart';
 
 import 'attachment_title.dart';
 import '../full_screen_media.dart';
@@ -51,11 +52,32 @@ class ImageAttachment extends AttachmentWidget {
         );
       },
       network: () {
-        final imageUrl =
+        var imageUrl =
             attachment.thumbUrl ?? attachment.imageUrl ?? attachment.assetUrl;
+
         if (imageUrl == null) {
           return AttachmentError(size: size);
         }
+
+        var imageUri = Uri.parse(imageUrl);
+        if (imageUri.host == 'stream-io-cdn.com') {
+          imageUri = imageUri.replace(queryParameters: {
+            ...imageUri.queryParameters,
+            'height': '500',
+            'width': '500',
+            'crop': 'center',
+            'resize': 'crop',
+          });
+        } else if (imageUri.host == 'stream-cloud-uploads.imgix.net') {
+          imageUri = imageUri.replace(queryParameters: {
+            ...imageUri.queryParameters,
+            'height': '500',
+            'width': '500',
+            'fit': 'crop',
+          });
+        }
+        imageUrl = imageUri.toString();
+
         return _buildImageAttachment(
           context,
           CachedNetworkImage(
@@ -65,9 +87,7 @@ class ImageAttachment extends AttachmentWidget {
               return Container(
                 width: size?.width,
                 height: size?.height,
-                child: Center(
-                  child: CircularProgressIndicator(),
-                ),
+                child: Image.memory(kTransparentImage),
               );
             },
             imageUrl: imageUrl,