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

@@ -1125,6 +1125,7 @@ abstract class _ComposeBoxBody extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final themeData = Theme.of(context);
+    final designVariables = DesignVariables.of(context);
 
     final inputThemeData = themeData.copyWith(
       inputDecorationTheme: const InputDecorationTheme(
@@ -1141,6 +1142,16 @@ abstract class _ComposeBoxBody extends StatelessWidget {
 
     final topicInput = buildTopicInput();
     return Column(children: [
+      ValueListenableBuilder(
+        valueListenable: controller._enabled,
+        builder: (context, enabled, child) {
+          return (!enabled) ? child! : const SizedBox.shrink();
+        },
+        child: LinearProgressIndicator(
+          minHeight: 2.0,
+          backgroundColor: designVariables.foreground.withFadedAlpha(0.2),
+          color: designVariables.foreground.withFadedAlpha(0.5),
+        )),
       Padding(
         padding: const EdgeInsets.symmetric(horizontal: 8),
         child: Theme(

test/widgets/compose_box_test.dart

@@ -467,6 +467,19 @@ void main() {
       check(controller!.content.text).equals(oldText);
     });
 
+    testWidgets('show progress bar while pending', (tester) async {
+      await setupAndTapSend(tester, prepareResponse: (int messageId) {
+        connection.prepare(json: SendMessageResult(
+          id: messageId).toJson(), delay: const Duration(seconds: 2));
+      });
+      check(controller!.enabled).isFalse();
+      check(find.byType(LinearProgressIndicator)).findsOne();
+
+      await tester.pump(const Duration(seconds: 2));
+      check(controller!.enabled).isTrue();
+      check(find.byType(LinearProgressIndicator)).findsNothing();
+    });
+
     testWidgets('ZulipApiException', (tester) async {
       await setupAndTapSend(tester, prepareResponse: (message) {
         connection.prepare(

test/widgets/message_list_test.dart

@@ -29,6 +29,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';
@@ -680,10 +681,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({