feat:widget for displaying 'Connecting' snackbar

 The widget, comprising a StatefulWidget (SnackBarPage) and its corresponding state class (SnackBarPageState)

Previously, the absence of a dedicated mechanism to display connection-related messages resulted in users experiencing ambiguity regarding Data Staleness.

By leveraging the initState and didUpdateWidget methods, the SnackBar is displayed post-build and upon isStale updates.

Fixes #465

Author: satyam372

lib/widgets/app.dart

@@ -16,6 +16,7 @@ import 'recent_dm_conversations.dart';
 import 'store.dart';
 import 'subscription_list.dart';
 import 'theme.dart';
+import 'snackbar.dart';
 
 class ZulipApp extends StatefulWidget {
   const ZulipApp({super.key, this.navigatorObservers});
@@ -295,6 +296,10 @@ class HomePage extends StatelessWidget {
                 MessageListPage.buildRoute(context: context,
                   narrow: StreamNarrow(testStreamId!))),
               child: const Text("#test here")), // scaffolding hack, see above
+            SizedBox(
+              height:40,
+              child:SnackBarPage(isStale:store.isStale),
+            ),
           ],
         ])));
   }

lib/widgets/snackbar.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+
+class SnackBarPage extends StatefulWidget {
+  final bool isStale;
+  const SnackBarPage({super.key, required this.isStale});
+
+  @override
+  SnackBarPageState createState() => SnackBarPageState();
+}
+
+class SnackBarPageState extends State<SnackBarPage> {
+  @override
+  void initState() {
+    super.initState();
+    // Call showSnackBar() after the build process is complete
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (widget.isStale) {
+        showSnackBar();
+      }
+    });
+  }
+
+  @override
+  void didUpdateWidget(covariant SnackBarPage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    // Check if isStale changed to true
+    if (widget.isStale && !oldWidget.isStale) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        showSnackBar();
+      });
+    }
+  }
+
+  void showSnackBar() {
+    String snackBarText = 'Connecting';
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(
+        content: Row(
+          children: [
+            const Icon(
+              Icons.sync,
+              color: Colors.white,
+            ),
+            const SizedBox(width: 8),
+            Text(
+              snackBarText,
+              style: const TextStyle(color: Colors.white),
+            )]),
+        duration: const Duration(seconds: 20),
+      ));
+    }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(); // Return an empty container or another widget here
+  }
+}
+
+

test/widgets/snackbar_test.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:zulip/widgets/snackbar.dart';
+
+void main() {
+  testWidgets('Test SnackBarPage', (WidgetTester tester) async {
+    /// SnackBarPage widget
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: SnackBarPage(isStale: false),
+        ),
+      ),
+    );
+
+    ///  noSnackBar is shown
+    await tester.pump();
+    expect(find.byType(SnackBar), findsNothing);
+
+    /// Change isStale to true
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: SnackBarPage(isStale: true),
+        ),
+      ),
+    );
+
+    ///  SnackBar is shown
+    await tester.pump();
+    expect(find.text('Connecting'), findsOneWidget);
+  });
+}