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,127 +164,209 @@ class _ChannelListViewState extends State<ChannelListView>
     return StreamBuilder<List<Channel>>(
         stream: channelsBlocState.channelsStream,
         builder: (context, snapshot) {
+          var child;
           if (snapshot.hasError) {
-            if (snapshot.error is Error) {
+            child = _buildErrorWidget(
-              print((snapshot.error as Error).stackTrace);
+              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 (widget.errorBuilder != null) {
+            if (channels.isEmpty && widget.emptyBuilder == null) {
-              return widget.errorBuilder(snapshot.error);
+              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'),
+                      ),
+                    ),
+                  );
+                },
+              );
             }
 
-            var message = snapshot.error.toString();
+            if (channels.isNotEmpty) {
-            if (snapshot.error is DioError) {
+              child = ListView.custom(
-              final dioError = snapshot.error as DioError;
+                physics: AlwaysScrollableScrollPhysics(),
-              if (dioError.type == DioErrorType.RESPONSE) {
+                controller: _scrollController,
-                message = dioError.message;
+                childrenDelegate: SliverChildBuilderDelegate(
-              } else {
+                  (context, i) {
-                message = 'Check your connection and retry';
+                    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 Center(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: <Widget>[
-                  Text.rich(
-                    TextSpan(
-                      children: [
-                        WidgetSpan(
-                          child: Padding(
-                            padding: const EdgeInsets.only(
-                              right: 2.0,
-                            ),
-                            child: Icon(Icons.error_outline),
-                          ),
-                        ),
-                        TextSpan(text: 'Error loading channels'),
-                      ],
-                    ),
-                    style: Theme.of(context).textTheme.headline6,
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.only(
-                      top: 16.0,
-                    ),
-                    child: Text(message),
-                  ),
-                  FlatButton(
-                    onPressed: () {
-                      channelsBlocState.queryChannels(
-                        filter: widget.filter,
-                        sortOptions: widget.sort,
-                        paginationParams: widget.pagination,
-                        options: widget.options,
-                      );
-                    },
-                    child: Text('Retry'),
-                  ),
-                ],
-              ),
-            );
           }
 
-          if (!snapshot.hasData) {
+          return AnimatedSwitcher(
-            return LayoutBuilder(
+            child: child,
-              builder: (context, viewportConstraints) {
+            duration: Duration(milliseconds: 500),
-                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 _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);
+    }
+
+    if (widget.errorBuilder != null) {
+      return widget.errorBuilder(snapshot.error);
+    }
+
+    var message = snapshot.error.toString();
+    if (snapshot.error is DioError) {
+      final dioError = snapshot.error as DioError;
+      if (dioError.type == DioErrorType.RESPONSE) {
+        message = dioError.message;
+      } else {
+        message = 'Check your connection and retry';
+      }
+    }
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          Text.rich(
+            TextSpan(
+              children: [
+                WidgetSpan(
+                  child: Padding(
+                    padding: const EdgeInsets.only(
+                      right: 2.0,
+                    ),
+                    child: Icon(Icons.error_outline),
+                  ),
+                ),
+                TextSpan(text: 'Error loading channels'),
+              ],
+            ),
+            style: Theme.of(context).textTheme.headline6,
+          ),
+          Padding(
+            padding: const EdgeInsets.only(
+              top: 16.0,
+            ),
+            child: Text(message),
+          ),
+          FlatButton(
+            onPressed: () {
+              channelsBlocState.queryChannels(
+                filter: widget.filter,
+                sortOptions: widget.sort,
+                paginationParams: widget.pagination,
+                options: widget.options,
+              );
+            },
+            child: Text('Retry'),
+          ),
+        ],
+      ),
+    );
+  }
+
   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,13 +542,11 @@ 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