diff --git a/src/domain/session/room/timeline/tiles/GapTile.js b/src/domain/session/room/timeline/tiles/GapTile.js index 32d632bf..eee77ef8 100644 --- a/src/domain/session/room/timeline/tiles/GapTile.js +++ b/src/domain/session/room/timeline/tiles/GapTile.js @@ -22,6 +22,7 @@ export class GapTile extends SimpleTile { super(options); this._loading = false; this._error = null; + this._visible = false; } async fill() { @@ -47,6 +48,13 @@ export class GapTile extends SimpleTile { return this._entry.edgeReached; } + setVisible(isVisible) { + this._visible = isVisible; + if (this._visible && !this.isLoading) { + this.fill(); + } + } + updateEntry(entry, params) { super.updateEntry(entry, params); if (!entry.isGap) { diff --git a/src/platform/web/ui/css/timeline.css b/src/platform/web/ui/css/timeline.css index 28ebf7bd..1eb704d9 100644 --- a/src/platform/web/ui/css/timeline.css +++ b/src/platform/web/ui/css/timeline.css @@ -54,15 +54,10 @@ limitations under the License. } .GapView { - visibility: hidden; display: flex; padding: 10px 20px; } -.GapView.isLoading { - visibility: visible; -} - .GapView > :nth-child(2) { flex: 1; } diff --git a/src/platform/web/ui/session/room/timeline/GapView.js b/src/platform/web/ui/session/room/timeline/GapView.js index afd22bd3..07e4d967 100644 --- a/src/platform/web/ui/session/room/timeline/GapView.js +++ b/src/platform/web/ui/session/room/timeline/GapView.js @@ -25,7 +25,7 @@ export class GapView extends TemplateView { }; return t.li({className}, [ spinner(t), - t.div(vm.i18n`Loading more messages …`), + 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)) ]); }