Add spinner

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/domain/login/LoginViewModel.js

@@ -39,6 +39,7 @@ export class LoginViewModel extends ViewModel {
         this._errorMessage = "";
         this._hideHomeserver = false;
         this._isBusy = false;
+        this._isFetchingLoginOptions = false;
         this._createViewModels(this._homeserver);
     }
 
@@ -51,6 +52,7 @@ export class LoginViewModel extends ViewModel {
     get cancelUrl() { return this.urlCreator.urlForSegment("session"); }
     get loadViewModel() {return this._loadViewModel; }
     get isBusy() { return this._isBusy; }
+    get isFetchingLoginOptions() { return this._isFetchingLoginOptions; }
 
     async _createViewModels(homeserver) {
         if (this._loginToken) {
@@ -67,11 +69,15 @@ export class LoginViewModel extends ViewModel {
         else {
             this._errorMessage = "";
             try {
+                this._isFetchingLoginOptions = true;
+                this.emitChange("isFetchingLoginOptions");
                 this._loginOptions = await this._sessionContainer.queryLogin(homeserver);
             }
             catch (e) {
                 this._loginOptions = null;
             }
+            this._isFetchingLoginOptions = false;
+            this.emitChange("isFetchingLoginOptions");
             if (this._loginOptions) {
                 if (this._loginOptions.sso) { this._showSSOLogin(); }
                 if (this._loginOptions.password) { this._showPasswordLogin(); }

src/platform/web/ui/css/login.css

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

src/platform/web/ui/login/LoginView.js

@@ -19,6 +19,7 @@ import {hydrogenGithubLink} from "./common.js";
 import {PasswordLoginView} from "./PasswordLoginView.js";
 import {CompleteSSOView} from "./CompleteSSOView.js";
 import {SessionLoadStatusView} from "./SessionLoadStatusView.js";
+import {spinner} from "../common.js";
 
 export class LoginView extends TemplateView {
     render(t, vm) {
@@ -41,6 +42,7 @@ export class LoginView extends TemplateView {
                     })
                 ]
             )),
+            t.if(vm => vm.isFetchingLoginOptions, t => t.div({className: "LoginView_query-spinner"}, [spinner(t), t.p("Fetching available login options...")])),
             t.mapView(vm => vm.passwordLoginViewModel, vm => vm ? new PasswordLoginView(vm): null),
             t.if(vm => vm.passwordLoginViewModel && vm.startSSOLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)),
             t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null),