make loading screen a bit prettier

by wrapping it in a view with common pre-session chrome

this renames the existing SessionLoadView to SessionLoadStatusView
so we can call the wrapper the former.

src/ui/web/css/login.css

@@ -52,19 +52,19 @@ limitations under the License.
     padding: 0.4em;
 }
 
-.SessionLoadView {
+.SessionLoadStatusView {
     display: flex;
 }
 
-.SessionLoadView > :not(:first-child) {
+.SessionLoadStatusView > :not(:first-child) {
     margin-left: 12px;
 }
 
-.SessionLoadView p {
+.SessionLoadStatusView p {
     flex: 1;
     margin: 0;
 }
 
-.SessionLoadView .spinner {
+.SessionLoadStatusView .spinner {
     --size: 20px;
 }

src/ui/web/login/LoginView.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {TemplateView} from "../general/TemplateView.js";
 import {hydrogenGithubLink} from "./common.js";
-import {SessionLoadView} from "./SessionLoadView.js";
+import {SessionLoadStatusView} from "./SessionLoadStatusView.js";
 
 export class LoginView extends TemplateView {
     render(t, vm) {
@@ -49,7 +49,7 @@ export class LoginView extends TemplateView {
                 t.div({className: "form-row"}, [t.label({for: "username"}, vm.i18n`Username`), username]),
                 t.div({className: "form-row"}, [t.label({for: "password"}, vm.i18n`Password`), password]),
                 t.div({className: "form-row"}, [t.label({for: "homeserver"}, vm.i18n`Homeserver`), homeserver]),
-                t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadView(loadViewModel) : null),
+                t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null),
                 t.div({className: "button-row"}, [
                     t.button({
                         className: "styled secondary",

src/ui/web/login/SessionLoadStatusView.js

@@ -0,0 +1,30 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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";
+
+/** a view used both in the login view and the loading screen
+to show the current state of loading the session.
+Just a spinner and a label, meant to be used as a paragraph */
+export class SessionLoadStatusView extends TemplateView {
+    render(t) {
+        return t.div({className: "SessionLoadStatusView"}, [
+            spinner(t, {hiddenWithLayout: vm => !vm.loading}),
+            t.p(vm => vm.loadLabel)
+        ]);
+    }
+}

src/ui/web/login/SessionLoadView.js

@@ -1,5 +1,5 @@
 /*
-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.
@@ -15,13 +15,16 @@ limitations under the License.
 */
 
 import {TemplateView} from "../general/TemplateView.js";
-import {spinner} from "../common.js";
+import {SessionLoadStatusView} from "./SessionLoadStatusView.js";
 
 export class SessionLoadView extends TemplateView {
-    render(t) {
+    render(t, vm) {
-        return t.div({className: "SessionLoadView"}, [
+        return t.div({className: "PreSessionScreen"}, [
-            spinner(t, {hiddenWithLayout: vm => !vm.loading}),
+            t.div({className: "logo"}),
-            t.p(vm => vm.loadLabel)
+            t.div({className: "SessionLoadView"}, [
+                t.h1(vm.i18n`Loading…`),
+                t.view(new SessionLoadStatusView(vm))
+            ])
         ]);
     }
 }

src/ui/web/login/SessionPickerView.js

@@ -17,7 +17,7 @@ limitations under the License.
 import {ListView} from "../general/ListView.js";
 import {TemplateView} from "../general/TemplateView.js";
 import {hydrogenGithubLink} from "./common.js";
-import {SessionLoadView} from "./SessionLoadView.js";
+import {SessionLoadStatusView} from "./SessionLoadStatusView.js";
 
 function selectFileAsText(mimeType) {
     const input = document.createElement("input");
@@ -117,7 +117,7 @@ export class SessionPickerView extends TemplateView {
                         onClick: () => vm.cancel()
                     }, vm.i18n`Sign In`)
                 ]),
-                t.if(vm => vm.loadViewModel, vm => new SessionLoadView(vm.loadViewModel)),
+                t.if(vm => vm.loadViewModel, vm => new SessionLoadStatusView(vm.loadViewModel)),
                 t.p(hydrogenGithubLink(t))
             ])
         ]);

src/ui/web/view-gallery.html

@@ -63,6 +63,15 @@
             }));
             document.getElementById("login-loading").appendChild(view.mount());
 		</script>
-
+        <h2 name="session-loading">Session Loading</h2>
+        <div id="session-loading" class="hydrogen"></div>
+        <script id="main" type="module">
+            import {SessionLoadView} from "./login/SessionLoadView.js";
+            const view = new SessionLoadView(vm({
+                loading: true,
+                loadLabel: "Getting on with loading your session..."
+            }));
+            document.getElementById("session-loading").appendChild(view.mount());
+        </script>
 	</body>
 </html>