loading screen while loading timeline

so we can set timelineVM directly to TimelineList

src/domain/session/room/RoomViewModel.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

src/ui/web/css/layout.css

@@ -78,7 +78,7 @@ html {
     height: 100%;
 }
 
-.TimelinePanel ul {
+.TimelinePanel .Timeline, .TimelinePanel .TimelineLoadingView {
     flex: 1 0 0;
 }
 

src/ui/web/css/room.css

@@ -73,3 +73,13 @@ limitations under the License.
     flex: 1;
     box-sizing: border-box;
 }
+
+.TimelineLoadingView {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.TimelineLoadingView div {
+    margin-left: 10px;
+}

src/ui/web/session/room/RoomView.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,16 +17,11 @@ limitations under the License.
 
 import {TemplateView} from "../../general/TemplateView.js";
 import {TimelineList} from "./TimelineList.js";
+import {TimelineLoadingView} from "./TimelineLoadingView.js";
 import {MessageComposer} from "./MessageComposer.js";
 
 export class RoomView extends TemplateView {
-    constructor(viewModel) {
-        super(viewModel);
-        this._timelineList = null;
-    }
-
     render(t, vm) {
-        this._timelineList = new TimelineList();
         return t.div({className: "RoomView"}, [
             t.div({className: "TimelinePanel"}, [
                 t.div({className: "RoomHeader"}, [
@@ -36,16 +32,13 @@ export class RoomView extends TemplateView {
                     ]),
                 ]),
                 t.div({className: "RoomView_error"}, vm => vm.error),
-                t.view(this._timelineList),
+                t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
+                    return timelineViewModel ?
+                        new TimelineList(timelineViewModel) :
+                        new TimelineLoadingView(vm);    // vm is just needed for i18n
+                }),
                 t.view(new MessageComposer(this.value.composerViewModel)),
             ])
         ]);
     }
-
-    update(value, prop) {
-        super.update(value, prop);
-        if (prop === "timelineViewModel") {
-            this._timelineList.update({viewModel: this.value.timelineViewModel});
-        }
-    }
 }

src/ui/web/session/room/TimelineList.js

@@ -21,8 +21,11 @@ import {ImageView} from "./timeline/ImageView.js";
 import {AnnouncementView} from "./timeline/AnnouncementView.js";
 
 export class TimelineList extends ListView {
-    constructor(options = {}) {
+    constructor(viewModel) {
-        options.className = "Timeline";
+        const options = {
+            className: "Timeline",
+            list: viewModel.tiles,
+        }
         super(options, entry => {
             switch (entry.shape) {
                 case "gap": return new GapView(entry);
@@ -34,7 +37,7 @@ export class TimelineList extends ListView {
         this._atBottom = false;
         this._onScroll = this._onScroll.bind(this);
         this._topLoadingPromise = null;
-        this._viewModel = null;
+        this._viewModel = viewModel;
     }
 
     async _onScroll() {
@@ -50,12 +53,7 @@ export class TimelineList extends ListView {
         }
     }
 
-    update(attributes) {
-        if(attributes.viewModel) {
-            this._viewModel = attributes.viewModel;
-            attributes.list = attributes.viewModel.tiles;
         }
-        super.update(attributes);
     }
 
     mount() {

src/ui/web/session/room/TimelineLoadingView.js

@@ -0,0 +1,27 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {TemplateView} from "../../general/TemplateView.js";
+import {spinner} from "../../common.js";
+
+export class TimelineLoadingView extends TemplateView {
+    render(t, vm) {
+        return t.div({className: "TimelineLoadingView"}, [
+            spinner(t),
+            t.div(vm.i18n`Loading messages…`)
+        ]);
+    }
+}