feat: nicer loading bar

lib/widgets/connection_status_header.dart

@@ -19,19 +19,14 @@ class ConnectionStatusHeader extends StatefulWidget {
 
 class _ConnectionStatusHeaderState extends State<ConnectionStatusHeader> {
   StreamSubscription? _onSyncSub;
-  StreamSubscription? _onSyncErrorSub;
-  bool get _connected =>
-      DateTime.now().millisecondsSinceEpoch -
-          _lastSyncReceived.millisecondsSinceEpoch <
-      (Matrix.of(context).client.sendMessageTimeoutSeconds + 2) * 1000;
-  static DateTime _lastSyncReceived = DateTime(0);
+  static bool _anySyncReceived = false;
+
   SyncStatusUpdate _status =
       const SyncStatusUpdate(SyncStatus.waitingForResponse);
 
   @override
   void dispose() {
     _onSyncSub?.cancel();
-    _onSyncErrorSub?.cancel();
     super.dispose();
   }
 
@@ -40,22 +35,24 @@ class _ConnectionStatusHeaderState extends State<ConnectionStatusHeader> {
     _onSyncSub ??= Matrix.of(context).client.onSyncStatus.stream.listen(
           (status) => setState(
             () {
-              if ((status.status == SyncStatus.processing &&
-                      Matrix.of(context).client.prevBatch != null) ||
-                  status.status == SyncStatus.finished) {
-                _lastSyncReceived = DateTime.now();
-              }
               _status = status;
+              if (status.status == SyncStatus.finished) {
+                _anySyncReceived = true;
+              }
             },
           ),
         );
 
+    final hide = _anySyncReceived &&
+        _status.status != SyncStatus.error &&
+        Matrix.of(context).client.prevBatch != null;
+
     return AnimatedContainer(
       duration: const Duration(milliseconds: 200),
       curve: Curves.bounceInOut,
-      height: _connected ? 0 : 36,
+      height: hide ? 0 : 36,
       clipBehavior: Clip.hardEdge,
-      decoration: BoxDecoration(color: Theme.of(context).colorScheme.surface),
+      decoration: BoxDecoration(color: Theme.of(context).secondaryHeaderColor),
       padding: const EdgeInsets.symmetric(horizontal: 12),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.center,
@@ -65,7 +62,7 @@ class _ConnectionStatusHeaderState extends State<ConnectionStatusHeader> {
             height: 24,
             child: CircularProgressIndicator.adaptive(
               strokeWidth: 2,
-              value: _connected ? 1.0 : _status.progress,
+              value: hide ? 1.0 : _status.progress,
             ),
           ),
           const SizedBox(width: 12),