Improve Comments Section

lib/views/pages/article-page.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
@@ -30,7 +31,11 @@ class ArticlePage extends StatefulWidget {
 class _ArticlePageState extends State<ArticlePage> {
   final ArticleModel article;
   Stream<List<ArticleCommentModel>> commentSectionStream;
+  StreamController<List<ArticleCommentModel>> commentStreamController;
+  List<ArticleCommentModel> currentCommentsList = [];
+  StreamSubscription commentSteamSubscription;
   bool webviewIsLoading = false;
+  bool startedLoadingComments = false;
 
   _ArticlePageState(this.article);
 
@@ -42,7 +47,29 @@ class _ArticlePageState extends State<ArticlePage> {
 
   _fetchArticleDetails() async {
     final service = ArticleService();
+    commentStreamController = StreamController();
     commentSectionStream = service.streamCommentSectionAsync(article);
+    commentSteamSubscription = commentSectionStream.listen((commentsList) {
+      currentCommentsList = commentsList;
+      commentStreamController.add(commentsList);
+      commentSteamSubscription.pause();
+    });
+    commentSteamSubscription.pause();
+  }
+
+  _startLoadingComments() {
+    if (!startedLoadingComments) {
+      commentSteamSubscription.resume();
+    }
+  }
+
+  _loadNextComment() {
+    if (startedLoadingComments) {
+      List<ArticleCommentModel> commentsList = currentCommentsList.map((x) => x).toList();
+      commentsList.add(ArticleCommentModel());
+      commentStreamController.add(commentsList);
+      commentSteamSubscription.resume();
+    }
   }
 
   /// Constructs the page body, which is shown "below" the sliding panel
@@ -114,7 +141,7 @@ class _ArticlePageState extends State<ArticlePage> {
               : Container(),
           SizedBox(height: 24),
 
-          IndexCommentSection(commentSectionStream: commentSectionStream),
+          IndexCommentSection(commentSectionStream: commentStreamController.stream),
         ],
       ),
     );
@@ -158,11 +185,19 @@ class _ArticlePageState extends State<ArticlePage> {
         cornerRadius: 24,
         cornerRadiusOnFullscreen: 0,
         // Configure snapping the overlay to the bottom of the screen
-        snapSpec: const SnapSpec(
+        snapSpec: SnapSpec(
           snap: true,
           snappings: [SnapSpec.headerSnap, SnapSpec.expanded],
           positioning: SnapPositioning.relativeToAvailableSpace,
+          onSnap: (state, snap) {
+            if (snap == 1) 
+              _startLoadingComments();
+          },
         ),
+        listener: (SheetState state) {
+          if (state.scrollOffset+300 > state.maxScrollExtent) 
+            _loadNextComment();
+        },
         // The widget "below" the sliding sheet
         body: _constructPageBody(),
         // Sliding sheet header

lib/views/pages/article/comment-section.dart

@@ -44,12 +44,16 @@ class IndexCommentSection extends StatelessWidget {
 
         // Efficiently construct list of all comments
         return ListView.builder(
-            shrinkWrap: true,
-            physics: NeverScrollableScrollPhysics(),
-            itemCount: snapshot.data.length,
-            itemBuilder: (BuildContext context, int index) {
+          shrinkWrap: true,
+          physics: NeverScrollableScrollPhysics(),
+          itemCount: snapshot.data.length,
+          itemBuilder: (BuildContext context, int index) {
+            if (snapshot.data[index].author == null && snapshot.data[index].text == null) {
+              return ShimmerArticle();
+            } else {
               return IndexComment(comment: snapshot.data[index]);
-            });
+            }
+          });
       },
     );
   }

lib/views/pages/article/comment.dart

@@ -26,7 +26,7 @@ class IndexComment extends StatelessWidget {
                   width: 4,
                   // height: 100,
                   margin: EdgeInsets.only(right: 5),
-                  color: Colors.grey.withOpacity(.5),
+                  color: Colors.grey.withOpacity(.5), 
                 )
               : Container(),
 
@@ -45,7 +45,9 @@ class IndexComment extends StatelessWidget {
                 Html(
                   data: comment.text != null ? comment.text : "<NULL>",
                   style: {
-                    "body": Style(margin: EdgeInsets.all(0)),
+                    "body": Style(
+                      margin: EdgeInsets.only(bottom: 15.0), 
+                    ),
                   },
                 ),
                 Column(