Show mock grey messages while loading messages

lib/src/ui/main/chat/chat_page.dart

@@ -22,6 +22,7 @@ import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:matrix_sdk/matrix_sdk.dart';
 import 'package:pattle/src/ui/main/chat/chat_bloc.dart';
 import 'package:pattle/src/ui/main/chat/widgets/date_header.dart';
+import 'package:pattle/src/ui/main/chat/widgets/loading_bubble.dart';
 import 'package:pattle/src/ui/main/models/chat_item.dart';
 import 'package:pattle/src/ui/main/widgets/chat_name.dart';
 import 'package:pattle/src/ui/main/widgets/error.dart';
@@ -284,12 +285,14 @@ class ChatPageState extends State<ChatPage> {
             switch(snapshot.connectionState) {
               case ConnectionState.none:
               case ConnectionState.waiting:
-                widget = SizedBox(
-                  height: MediaQuery.of(context).size.height * 2,
-                  child: Align(
-                    alignment: Alignment.bottomCenter,
-                    child: PlatformCircularProgressIndicator()
-                  ),
+                widget = ListView(
+                    reverse: true,
+                    primary: false,
+                    physics: NeverScrollableScrollPhysics(),
+                    shrinkWrap: true,
+                    children: List.generate(20, (i) => LoadingBubble(
+                      isMine: i % 2 == 0,
+                    ))
                 );
                 break;
               case ConnectionState.active:

lib/src/ui/main/chat/widgets/loading_bubble.dart

+// Copyright (C) 2019  Wilko Manger
+//
+// This file is part of Pattle.
+//
+// Pattle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Pattle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with Pattle.  If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:matrix_sdk/matrix_sdk.dart';
+import 'package:pattle/src/ui/main/models/chat_item.dart';
+import 'package:pattle/src/ui/main/widgets/platform_ink_well.dart';
+import 'package:pattle/src/ui/util/future_or_builder.dart';
+import 'package:pattle/src/ui/util/user.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:pattle/src/di.dart' as di;
+import 'package:flutter_html/flutter_html.dart';
+
+import 'bubble.dart';
+import 'message_bubble.dart';
+
+class LoadingBubble extends MessageBubble {
+
+  @override
+  TextMessageEvent event;
+
+  LoadingBubble({
+    @required bool isMine,
+  }) :
+    super(
+      item: ChatEvent(
+        TextMessageEvent(
+          TextMessage(
+            body: 'Blabla',
+          ),
+          RoomEventArgs(
+            id: EventId('1234'),
+            sender: User(
+              id: UserId('@wilko:pattle.im'),
+              state: UserState(
+                roomId: RoomId('!343432:pattle.im'),
+                displayName: 'Wilko',
+                since: DateTime.now()
+              )
+            ),
+            time: DateTime.now(),
+          )
+        )
+      ),
+      isMine: isMine
+  ) {
+    event = item.event;
+  }
+
+  @override
+  Color mineColor() => Colors.grey[350];
+
+  @protected
+  Widget buildMine(BuildContext context) => buildContent(context);
+
+  @override
+  Color theirsColor() => Colors.grey[350];
+
+  @protected
+  Widget buildTheirs(BuildContext context) => buildContent(context);
+
+  @override
+  Widget buildContent(BuildContext context) => Container(
+    height: 64,
+    width: 256,
+  );
+
+}
\ No newline at end of file

lib/src/ui/main/chat/widgets/message_bubble.dart

@@ -17,7 +17,6 @@
 // along with Pattle.  If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/material.dart';
-import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:matrix_sdk/matrix_sdk.dart';
 import 'package:pattle/src/ui/main/models/chat_item.dart';
 import 'package:pattle/src/ui/resources/theme.dart';
@@ -290,6 +289,8 @@ abstract class MessageBubble extends Bubble {
     return bottom;
   }
 
+  Color mineColor() => LightColors.red[450];
+
   Widget _buildMine(BuildContext context) =>
     Column(
       crossAxisAlignment: CrossAxisAlignment.end,
@@ -308,7 +309,7 @@ abstract class MessageBubble extends Bubble {
                     top: marginTop(),
                   ) : EdgeInsets.only(),
                 child: Material(
-                  color: LightColors.red[450],
+                  color: mineColor(),
                   elevation: 1,
                   shape: border(),
                   child: buildMine(context)
@@ -323,6 +324,8 @@ abstract class MessageBubble extends Bubble {
   @protected
   Widget buildMine(BuildContext context);
 
+  Color theirsColor() => Colors.white;
+
   Widget _buildTheirs(BuildContext context) =>
     Column(
       crossAxisAlignment: CrossAxisAlignment.start,
@@ -341,7 +344,7 @@ abstract class MessageBubble extends Bubble {
                     top: marginTop()
                   ) : EdgeInsets.only(),
                 child: Material(
-                  color: Colors.white,
+                  color: theirsColor(),
                   elevation: 1,
                   shape: border(),
                   child: buildTheirs(context),