From d01a95aae3da88577fab0b74d209b3ae2460cffd Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Thu, 4 Aug 2022 16:37:28 +0530
Subject: [PATCH] UI improvements

---
 .../session/room/timeline/tiles/GapTile.js    |  5 ++++-
 .../web/ui/css/themes/element/timeline.css    |  9 ++++++++
 .../web/ui/session/room/timeline/GapView.js   | 22 +++++++++++++++----
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/GapTile.js b/src/domain/session/room/timeline/tiles/GapTile.js
index e2e5b041..9bebb7b5 100644
--- a/src/domain/session/room/timeline/tiles/GapTile.js
+++ b/src/domain/session/room/timeline/tiles/GapTile.js
@@ -111,8 +111,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;
     }
diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css
index 43c57d19..47f9a365 100644
--- a/src/platform/web/ui/css/themes/element/timeline.css
+++ b/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;
+}
diff --git a/src/platform/web/ui/session/room/timeline/GapView.js b/src/platform/web/ui/session/room/timeline/GapView.js
index db6cda59..03f87fcf 100644
--- a/src/platform/web/ui/session/room/timeline/GapView.js
+++ b/src/platform/web/ui/session/room/timeline/GapView.js
@@ -29,10 +29,24 @@ 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.error,
+                (error, t, vm) => {
+                    let elements;
+                    if (error) {
+                        elements = [t.strong(() => error.message)]; 
+                        if (error.showSpinner) {
+                            elements.unshift(spinner(t));
+                        }
+                    }
+                    else if (vm.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);
+                })
         ]);
     }