compose: Show a progress bar when sending message

This progress bar shifts the message list because it increases the
height of the compose box.  This is undesirable, but a fix can be
implemented in the future.

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/compose_box.dart

@@ -272,6 +272,21 @@ class ComposeContentController extends ComposeController<ContentValidationError>
   }
 }
 
+class _TopBar extends StatelessWidget {
+  const _TopBar({required this.showProgressIndicator});
+
+  final bool showProgressIndicator;
+
+  @override
+  Widget build(BuildContext context) {
+    // TODO: Figure out a way so that this does not shift the message list
+    //   when it gains more height.
+    return Column(children: [
+      if (showProgressIndicator) _progressIndicator(context),
+    ]);
+  }
+}
+
 class _ContentInput extends StatefulWidget {
   const _ContentInput({
     required this.enabled,
@@ -1072,6 +1087,14 @@ class _SendButtonState extends State<_SendButton> {
   }
 }
 
+Widget _progressIndicator(BuildContext context) {
+  final designVariables = DesignVariables.of(context);
+  return LinearProgressIndicator(
+    minHeight: 2.0,
+    backgroundColor: designVariables.foreground.withFadedAlpha(0.2),
+    color: designVariables.foreground.withFadedAlpha(0.5));
+}
+
 class _ComposeBoxContainer extends StatelessWidget {
   const _ComposeBoxContainer({required this.children});
 
@@ -1094,12 +1117,14 @@ class _ComposeBoxContainer extends StatelessWidget {
 
 class _ComposeBoxLayout extends StatelessWidget {
   const _ComposeBoxLayout({
+    required this.topBar,
     required this.topicInput,
     required this.contentInput,
     required this.composeButtonBar,
     required this.sendButton,
   });
 
+  final Widget topBar;
   final Widget? topicInput;
   final Widget contentInput;
   final Widget composeButtonBar;
@@ -1133,6 +1158,7 @@ class _ComposeBoxLayout extends StatelessWidget {
       data: iconButtonThemeData,
       child: _ComposeBoxContainer(
         children: [
+          topBar,
           SafeArea(
             minimum: const EdgeInsets.symmetric(horizontal: 8),
             child: Column(children: [
@@ -1208,6 +1234,7 @@ class _StreamComposeBoxState extends State<_StreamComposeBox> implements Compose
       valueListenable: _enabled,
       builder: (context, enabled, child) {
         return _ComposeBoxLayout(
+          topBar: _TopBar(showProgressIndicator: !enabled),
           topicInput: _TopicInput(
             enabled: enabled,
             streamId: widget.narrow.streamId,
@@ -1293,6 +1320,7 @@ class _FixedDestinationComposeBoxState extends State<_FixedDestinationComposeBox
       valueListenable: _enabled,
       builder: (context, enabled, child) {
         return _ComposeBoxLayout(
+          topBar: _TopBar(showProgressIndicator: !enabled),
           topicInput: null,
           contentInput: _FixedDestinationContentInput(
             enabled: enabled,

test/widgets/compose_box_test.dart

@@ -443,6 +443,7 @@ void main() {
       final composeBoxController = controllerKey.currentState!;
       check(composeBoxController.enabled).isFalse();
       check(composeBoxController.contentController.text).isNotEmpty();
+      check(find.byType(LinearProgressIndicator)).findsOne();
 
       await tester.tap(find.byIcon(ZulipIcons.send));
       await tester.pump(Duration.zero);
@@ -455,6 +456,7 @@ void main() {
       await tester.pump(const Duration(seconds: 2));
       check(composeBoxController.enabled).isTrue();
       check(composeBoxController.contentController.text).isEmpty();
+      check(find.byType(LinearProgressIndicator)).findsNothing();
     });
 
     testWidgets('re-enable compose box even on failure; do not clear text', (tester) async {

test/widgets/message_list_test.dart

@@ -28,6 +28,7 @@ import '../api/fake_api.dart';
 import '../example_data.dart' as eg;
 import '../model/binding.dart';
 import '../model/content_test.dart';
+import '../model/message_list_test.dart';
 import '../model/test_store.dart';
 import '../flutter_checks.dart';
 import '../stdlib_checks.dart';
@@ -652,10 +653,16 @@ void main() {
         ..decoration.isNotNull().hintText.equals('Message #${otherChannel.name} > new topic')
         ..controller.isNotNull().text.equals('Some text');
 
+      connection.takeRequests();
       connection.prepare(json: SendMessageResult(id: 1).toJson());
+      // Prepare for the progress indicator that shifts the message list
+      // and triggers a message fetch as soon as we send the message.
+      connection.prepare(json: olderResult(
+        anchor: message.id, foundOldest: true, messages: []).toJson());
       await tester.tap(find.byIcon(ZulipIcons.send));
       await tester.pump();
-      check(connection.lastRequest).isA<http.Request>()
+      final requests = connection.takeRequests();
+      check(requests.first).isA<http.Request>()
         ..method.equals('POST')
         ..url.path.equals('/api/v1/messages')
         ..bodyFields.deepEquals({