add shimmer effect

example/lib/main.dart

@@ -21,7 +21,7 @@ void main() async {
     logLevel: Level.INFO,
     showLocalNotification:
         (!kIsWeb && Platform.isAndroid) ? showLocalNotification : null,
-    persistenceEnabled: true,
+    persistenceEnabled: false,
   );
 
   if (userId != null) {

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.59+61
+version: 1.0.60+62
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/channel_list_view.dart

@@ -4,6 +4,7 @@ import 'dart:convert';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
+import 'package:shimmer/shimmer.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/channels_bloc.dart';
 import 'package:stream_chat_flutter/src/utils.dart';
@@ -163,7 +164,150 @@ class _ChannelListViewState extends State<ChannelListView>
     return StreamBuilder<List<Channel>>(
         stream: channelsBlocState.channelsStream,
         builder: (context, snapshot) {
+          var child;
           if (snapshot.hasError) {
+            child = _buildErrorWidget(
+              snapshot,
+              context,
+              channelsBlocState,
+            );
+          } else if (!snapshot.hasData) {
+            child = _buildLoadingWidget();
+          } else {
+            final channels = snapshot.data;
+
+            if (channels.isEmpty && widget.emptyBuilder != null) {
+              child = widget.emptyBuilder(context);
+            }
+
+            if (channels.isEmpty && widget.emptyBuilder == null) {
+              child = LayoutBuilder(
+                builder: (context, viewportConstraints) {
+                  return SingleChildScrollView(
+                    physics: AlwaysScrollableScrollPhysics(),
+                    child: ConstrainedBox(
+                      constraints: BoxConstraints(
+                        minHeight: viewportConstraints.maxHeight,
+                      ),
+                      child: Center(
+                        child: Text('You have no channels currently'),
+                      ),
+                    ),
+                  );
+                },
+              );
+            }
+
+            if (channels.isNotEmpty) {
+              child = ListView.custom(
+                physics: AlwaysScrollableScrollPhysics(),
+                controller: _scrollController,
+                childrenDelegate: SliverChildBuilderDelegate(
+                  (context, i) {
+                    return _itemBuilder(context, i, channels);
+                  },
+                  childCount: (channels.length * 2) + 1,
+                  findChildIndexCallback: (key) {
+                    final ValueKey<String> valueKey = key;
+                    final index = channels.indexWhere(
+                        (channel) => 'CHANNEL-${channel.id}' == valueKey.value);
+                    return index != -1 ? (index * 2) : null;
+                  },
+                ),
+              );
+            }
+          }
+
+          return AnimatedSwitcher(
+            child: child,
+            duration: Duration(milliseconds: 500),
+          );
+        });
+  }
+
+  Widget _buildLoadingWidget() {
+    return ListView(
+      physics: AlwaysScrollableScrollPhysics(),
+      children: List.generate(
+        25,
+        (i) {
+          if (i % 2 != 0) {
+            if (widget.separatorBuilder != null) {
+              return widget.separatorBuilder(context, i);
+            }
+            return _separatorBuilder(context, i);
+          }
+          return _buildLoadingItem();
+        },
+      ),
+    );
+  }
+
+  Shimmer _buildLoadingItem() {
+    return Shimmer.fromColors(
+      baseColor: Color(0xffE5E5E5),
+      highlightColor: Color(0xffffffff),
+      child: ListTile(
+        leading: Container(
+          decoration: BoxDecoration(
+            color: Colors.white,
+            shape: BoxShape.circle,
+          ),
+          constraints: BoxConstraints.tightFor(
+            height: 40,
+            width: 40,
+          ),
+        ),
+        title: Align(
+          alignment: Alignment.centerLeft,
+          child: Container(
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(11),
+            ),
+            constraints: BoxConstraints.tightFor(
+              height: 16,
+              width: 82,
+            ),
+          ),
+        ),
+        subtitle: Row(
+          children: [
+            Align(
+              alignment: Alignment.centerLeft,
+              child: Container(
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(11),
+                ),
+                constraints: BoxConstraints.tightFor(
+                  height: 16,
+                  width: 238,
+                ),
+              ),
+            ),
+            Container(
+              margin: const EdgeInsets.only(left: 16),
+              decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(11),
+              ),
+              constraints: BoxConstraints.tightFor(
+                height: 16,
+                width: 42,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildErrorWidget(
+    AsyncSnapshot<List<Channel>> snapshot,
+    BuildContext context,
+    ChannelsBlocState channelsBlocState,
+  ) {
     if (snapshot.error is Error) {
       print((snapshot.error as Error).stackTrace);
     }
@@ -223,67 +367,6 @@ class _ChannelListViewState extends State<ChannelListView>
     );
   }
 
-          if (!snapshot.hasData) {
-            return LayoutBuilder(
-              builder: (context, viewportConstraints) {
-                return SingleChildScrollView(
-                  physics: AlwaysScrollableScrollPhysics(),
-                  child: ConstrainedBox(
-                    constraints: BoxConstraints(
-                      minHeight: viewportConstraints.maxHeight,
-                    ),
-                    child: Center(
-                      child: CircularProgressIndicator(),
-                    ),
-                  ),
-                );
-              },
-            );
-          }
-
-          final channels = snapshot.data;
-
-          if (channels.isEmpty && widget.emptyBuilder != null) {
-            return widget.emptyBuilder(context);
-          }
-
-          if (channels.isEmpty && widget.emptyBuilder == null) {
-            return LayoutBuilder(
-              builder: (context, viewportConstraints) {
-                return SingleChildScrollView(
-                  physics: AlwaysScrollableScrollPhysics(),
-                  child: ConstrainedBox(
-                    constraints: BoxConstraints(
-                      minHeight: viewportConstraints.maxHeight,
-                    ),
-                    child: Center(
-                      child: Text('You have no channels currently'),
-                    ),
-                  ),
-                );
-              },
-            );
-          }
-
-          return ListView.custom(
-            physics: AlwaysScrollableScrollPhysics(),
-            controller: _scrollController,
-            childrenDelegate: SliverChildBuilderDelegate(
-              (context, i) {
-                return _itemBuilder(context, i, channels);
-              },
-              childCount: (channels.length * 2) + 1,
-              findChildIndexCallback: (key) {
-                final ValueKey<String> valueKey = key;
-                final index = channels.indexWhere(
-                    (channel) => 'CHANNEL-${channel.id}' == valueKey.value);
-                return index != -1 ? (index * 2) : null;
-              },
-            ),
-          );
-        });
-  }
-
   Widget _itemBuilder(context, int i, List<Channel> channels) {
     if (i % 2 != 0) {
       if (widget.separatorBuilder != null) {
@@ -441,7 +524,9 @@ class _ChannelListViewState extends State<ChannelListView>
   }
 
   Widget _buildQueryProgressIndicator(
-      context, ChannelsBlocState channelsProvider) {
+    context,
+    ChannelsBlocState channelsProvider,
+  ) {
     return StreamBuilder<bool>(
         stream: channelsProvider.queryChannelsLoading,
         initialData: false,
@@ -457,12 +542,10 @@ class _ChannelListViewState extends State<ChannelListView>
               ),
             );
           }
-          return Container(
+          return snapshot.data
-            height: 100,
+              ? _buildLoadingItem()
-            padding: EdgeInsets.all(32),
+              : Container(
-            child: Center(
+                  height: 70,
-              child: snapshot.data ? CircularProgressIndicator() : Container(),
-            ),
                 );
         });
   }

pubspec.yaml

@@ -19,6 +19,7 @@ dependencies:
   flutter_svg: ^0.19.1
   flutter_portal: ^0.3.0
   cached_network_image: ^2.2.0+1
+  shimmer: ^1.1.2
   flutter_markdown: ^0.5.0
   url_launcher: ^5.4.11
   emojis: ^0.9.3