diff --git a/src/domain/session/room/timeline/tiles/GapTile.js b/src/domain/session/room/timeline/tiles/GapTile.js index 3a7f7533..7aae124d 100644 --- a/src/domain/session/room/timeline/tiles/GapTile.js +++ b/src/domain/session/room/timeline/tiles/GapTile.js @@ -26,21 +26,22 @@ export class GapTile extends SimpleTile { this._error = null; this._isAtTop = true; this._siblingChanged = false; + this._showSpinner = false; } async fill() { if (!this._loading && !this._entry.edgeReached) { this._loading = true; this._error = null; + this._showSpinner = true; 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) { + this.emitChange("error"); /* We need to wait for reconnection here rather than in notifyVisible() because when we return/throw here @@ -49,13 +50,13 @@ export class GapTile extends SimpleTile { 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; } finally { this._loading = false; + this._showSpinner = false; this.emitChange("isLoading"); } return true; @@ -128,13 +129,17 @@ export class GapTile extends SimpleTile { return this._loading; } + get showSpinner() { + return this._showSpinner; + } + get error() { if (this._error) { if (this._error instanceof ConnectionError) { - return { message: "Waiting for reconnection", showSpinner: true }; + return "Waiting for reconnection"; } const dir = this._entry.prev_batch ? "previous" : "next"; - return { message: `Could not load ${dir} messages: ${this._error.message}`, showSpinner: false }; + return `Could not load ${dir} messages: ${this._error.message}`; } return null; } diff --git a/src/platform/web/ui/session/room/timeline/GapView.js b/src/platform/web/ui/session/room/timeline/GapView.js index 87afe503..e80321be 100644 --- a/src/platform/web/ui/session/room/timeline/GapView.js +++ b/src/platform/web/ui/session/room/timeline/GapView.js @@ -30,24 +30,18 @@ export class GapView extends TemplateView { isAtTop: vm => vm.isAtTop, }; 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); - }) + t.if(vm => vm.showSpinner, (t) => spinner(t)), + t.span(vm => { + if (vm.error) { + return vm.error; + } + else if (vm.isLoading) { + return "Loading"; + } + else { + return "Not Loading"; + } + }) ]); }