From 220144898be390bbeeec68bcb5037f706c63a520 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 17 Aug 2022 13:13:20 +0530
Subject: [PATCH] Fix errors and simplify code

---
 .../session/room/timeline/tiles/GapTile.js    | 15 ++++++----
 .../web/ui/session/room/timeline/GapView.js   | 30 ++++++++-----------
 2 files changed, 22 insertions(+), 23 deletions(-)

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