From 08de7c35694b6a5b4af6efb8724ff8f2f13d7cc6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 17 Aug 2020 16:34:25 +0200 Subject: [PATCH] loading screen while loading timeline so we can set timelineVM directly to TimelineList --- src/domain/session/room/RoomViewModel.js | 1 + src/ui/web/css/layout.css | 2 +- src/ui/web/css/room.css | 10 +++++++ src/ui/web/session/room/RoomView.js | 21 +++++---------- src/ui/web/session/room/TimelineList.js | 14 +++++----- .../web/session/room/TimelineLoadingView.js | 27 +++++++++++++++++++ 6 files changed, 52 insertions(+), 23 deletions(-) create mode 100644 src/ui/web/session/room/TimelineLoadingView.js diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index c29a4cc8..5b625fe6 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -1,5 +1,6 @@ /* Copyright 2020 Bruno Windels +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. diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css index 95fe71da..36385a75 100644 --- a/src/ui/web/css/layout.css +++ b/src/ui/web/css/layout.css @@ -78,7 +78,7 @@ html { height: 100%; } -.TimelinePanel ul { +.TimelinePanel .Timeline, .TimelinePanel .TimelineLoadingView { flex: 1 0 0; } diff --git a/src/ui/web/css/room.css b/src/ui/web/css/room.css index 252313a3..6bf01da7 100644 --- a/src/ui/web/css/room.css +++ b/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; +} diff --git a/src/ui/web/session/room/RoomView.js b/src/ui/web/session/room/RoomView.js index 0c7ace9e..de11619a 100644 --- a/src/ui/web/session/room/RoomView.js +++ b/src/ui/web/session/room/RoomView.js @@ -1,5 +1,6 @@ /* Copyright 2020 Bruno Windels +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}); - } - } } diff --git a/src/ui/web/session/room/TimelineList.js b/src/ui/web/session/room/TimelineList.js index 37b43348..9697bce6 100644 --- a/src/ui/web/session/room/TimelineList.js +++ b/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 = {}) { - options.className = "Timeline"; + constructor(viewModel) { + 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() { diff --git a/src/ui/web/session/room/TimelineLoadingView.js b/src/ui/web/session/room/TimelineLoadingView.js new file mode 100644 index 00000000..88d07f43 --- /dev/null +++ b/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…`) + ]); + } +}