UI improvements

src/domain/session/room/timeline/tiles/GapTile.js

@@ -111,8 +111,11 @@ export class GapTile extends SimpleTile {
 
     get error() {
         if (this._error) {
+            if (this._error instanceof ConnectionError) {
+                return { message: "Waiting for reconnection", showSpinner: true };
+            }
             const dir = this._entry.prev_batch ? "previous" : "next";
-            return `Could not load ${dir} messages: ${this._error.message}`;
+            return { message: `Could not load ${dir} messages: ${this._error.message}`, showSpinner: false };
         }
         return null;
     }

src/platform/web/ui/css/themes/element/timeline.css

@@ -422,3 +422,12 @@ only loads when the top comes into view*/
 .GapView.isAtTop {
     padding: 52px 20px 12px 20px;
 }
+
+.GapView__container {
+    display: flex;
+    align-items: center;
+}
+
+.GapView__container .spinner {
+    margin-right: 10px;
+}

src/platform/web/ui/session/room/timeline/GapView.js

@@ -29,10 +29,24 @@ export class GapView extends TemplateView {
             isLoading: vm => vm.isLoading,
             isAtTop: vm => vm.isAtTop,
         };
-        return t.li({className}, [
+        return t.li({ className }, [
-            spinner(t),
+            t.map(vm => vm.error,
-            t.div(vm => vm.isLoading ? vm.i18n`Loading more messages …` : vm.i18n`Not loading!`),
+                (error, t, vm) => {
-            t.if(vm => vm.error, t => t.strong(vm => vm.error))
+                    let elements;
+                    if (error) {
+                        elements = [t.strong(() => error.message)]; 
+                        if (error.showSpinner) {
+                            elements.unshift(spinner(t));
+                        }
+                    }
+                    else if (vm.isLoading) {
+                        elements = [spinner(t), t.span(vm.i18n`Loading more messages …`)];
+                    }
+                    else {
+                        elements = t.span(vm.i18n`Not loading!`);
+                    }
+                    return t.div({ className: "GapView__container" }, elements);
+                })
         ]);
     }