Run binding when isLoading changes

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

@@ -16,6 +16,8 @@ limitations under the License.
 
 import {SimpleTile} from "./SimpleTile.js";
 import {UpdateAction} from "../UpdateAction.js";
+import {ConnectionError} from "../../../../../matrix/error.js";
+import {ConnectionStatus} from "../../../../../matrix/net/Reconnector";
 
 export class GapTile extends SimpleTile {
     constructor(entry, options) {
@@ -29,13 +31,26 @@ export class GapTile extends SimpleTile {
     async fill() {
         if (!this._loading && !this._entry.edgeReached) {
             this._loading = true;
+            this._error = null;
             this.emitChange("isLoading");
             try {
                 await this._room.fillGap(this._entry, 10);
             } catch (err) {
                 console.error(`room.fillGap(): ${err.message}:\n${err.stack}`);
                 this._error = err;
+                this._loading = false;
                 this.emitChange("error");
+                if (err instanceof ConnectionError) {
+                    /*
+                    We need to wait for reconnection here rather than in
+                    notifyVisible() because when we return/throw here
+                    this._loading is set to false and other queued invocations of
+                    this method will succeed and attempt further room.fillGap() calls - 
+                    resulting in multiple error entries in logs and elsewhere!
+                    */
+                    await this._waitForReconnection();
+                    return true;
+                }
                 // rethrow so caller of this method
                 // knows not to keep calling this for now
                 throw err;
@@ -55,7 +70,18 @@ export class GapTile extends SimpleTile {
         let canFillMore;
         this._siblingChanged = false;
         do {
-            canFillMore = await this.fill();
+            try {
+                canFillMore = await this.fill();
+            }
+            catch (e) {
+                if (e instanceof ConnectionError) {
+                    // Don't increase depth because this gap fill was a noop
+                    continue;
+                }
+                else {
+                    canFillMore = false;
+                }
+            }
             depth = depth + 1;
         } while (depth < 10 && !this._siblingChanged && canFillMore && !this.isDisposed);
     }
@@ -90,6 +116,10 @@ export class GapTile extends SimpleTile {
         }
     }
 
+    async _waitForReconnection() {
+        await this.options.client.reconnector.connectionStatus.waitFor(status => status === ConnectionStatus.Online).promise;
+    }
+
     get shape() {
         return "gap";
     }
@@ -100,8 +130,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,25 @@ export class GapView extends TemplateView {
             isLoading: vm => vm.isLoading,
             isAtTop: vm => vm.isAtTop,
         };
-        return t.li({className}, [
-            spinner(t),
-            t.div(vm => vm.isLoading ? vm.i18n`Loading more messages …` : vm.i18n`Not loading!`),
-            t.if(vm => vm.error, t => t.strong(vm => vm.error))
+        return t.li({ className }, [
+            t.map(vm => vm.isLoading,
+                (isLoading, t, vm) => {
+                    let elements;
+                    const error = vm.error;
+                    if (error) {
+                        elements = [t.strong(() => error.message)]; 
+                        if (error.showSpinner) {
+                            elements.unshift(spinner(t));
+                        }
+                    }
+                    else if (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);
+                })
         ]);
     }