From e89f60bac0ffd1995d5d039bf4f94beab006a344 Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Wed, 8 Sep 2021 12:05:59 +0200
Subject: [PATCH] fill gap tiles when they become visible

---
 src/domain/session/room/timeline/tiles/GapTile.js    | 8 ++++++++
 src/platform/web/ui/css/timeline.css                 | 5 -----
 src/platform/web/ui/session/room/timeline/GapView.js | 2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

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))
         ]);
     }