channel_list: Ensure subscription toggle is disabled while loading

Author: Khader-1

lib/widgets/channel_list.dart

@@ -95,27 +95,44 @@ class ChannelItem extends StatelessWidget {
                   overflow: TextOverflow.ellipsis),
               ])),
               const SizedBox(width: 8),
-              _ChannelItemSubscriptionToggle(stream: stream),
+              _ChannelItemSubscriptionToggle(stream: stream, channelItemContext: context),
             ]))));
   }
 }
 
-class _ChannelItemSubscriptionToggle extends StatelessWidget {
-  const _ChannelItemSubscriptionToggle({required this.stream});
+class _ChannelItemSubscriptionToggle extends StatefulWidget {
+  const _ChannelItemSubscriptionToggle({required this.stream, required this.channelItemContext});
 
   final ZulipStream stream;
+  final BuildContext channelItemContext;
+
+  @override
+  State<_ChannelItemSubscriptionToggle> createState() => _ChannelItemSubscriptionToggleState();
+}
+
+class _ChannelItemSubscriptionToggleState extends State<_ChannelItemSubscriptionToggle> {
+  bool _isLoading = false;
+
+  void _setIsLoading(bool value) {
+    if (!mounted) return;
+    setState(() => _isLoading = value);
+  }
 
   @override
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
-    final (icon, color, onPressed) = stream is Subscription
+    final (icon, color, onPressed) = widget.stream is Subscription
     ? (Icons.check, colorScheme.primary, _unsubscribeFromChannel)
     : (Icons.add,   null,                _subscribeToChannel);
 
     return IconButton(
       color: color,
       icon: Icon(icon),
-      onPressed: () => onPressed(context, stream));
+      onPressed: _isLoading ? null : () async {
+        _setIsLoading(true);
+        await onPressed(context, widget.stream);
+        _setIsLoading(false);
+      });
   }
 
   Future<void> _unsubscribeFromChannel(BuildContext context, ZulipStream stream) async {
@@ -165,7 +182,7 @@ class _ChannelItemSubscriptionToggle extends StatelessWidget {
     } catch (e) {
       if (!context.mounted) return;
       final zulipLocalizations = ZulipLocalizations.of(context);
-      await showErrorDialog(context: context,
+      showErrorDialog(context: context,
         title: zulipLocalizations.errorFailedToSubscribedToChannel(stream.name),
         message: e.toString()); // TODO(#741): extract user-facing message better
     }

test/widgets/channel_list_test.dart

@@ -134,6 +134,39 @@ void main() {
       check(find.byIcon(Icons.check).evaluate()).isEmpty();
     }, skip: true);
 
+    testWidgets('is disabled while loading', (WidgetTester tester) async {
+      final stream = eg.stream();
+      await setupChannelListPage(tester, streams: [stream], subscriptions: []);
+      connection.prepare(json: SubscribeToChannelsResult(
+        subscribed: {eg.selfUser.email: [stream.name]},
+        alreadySubscribed: {}).toJson());      await tapSubscribeButton(tester);
+      await tester.pump();
+
+      check(tester.widget<IconButton>(
+        find.byType(IconButton)).onPressed).isNull();
+
+      await tester.pump(const Duration(seconds: 2));
+
+      check(tester.widget<IconButton>(
+        find.byType(IconButton)).onPressed).isNotNull();
+    }, skip: true);
+
+    testWidgets('is disabled while loading and enabled back when loading fails', (WidgetTester tester) async {
+      final stream = eg.stream();
+      await setupChannelListPage(tester, streams: [stream], subscriptions: []);
+      connection.prepare(exception: http.ClientException('Oops'), delay: const Duration(seconds: 2));
+      await tapSubscribeButton(tester);
+      await tester.pump();
+
+      check(tester.widget<IconButton>(
+        find.byType(IconButton)).onPressed).isNull();
+
+      await tester.pump(const Duration(seconds: 2));
+
+      check(tester.widget<IconButton>(
+        find.byType(IconButton)).onPressed).isNotNull();
+    }, skip: true);
+
     group('subscribe', () {
       testWidgets('is shown only for streams that user is not subscribed to', (tester) async {
         final streams = [eg.stream(), eg.stream(), eg.subscription(eg.stream())];