Merge pull request #57 from vector-im/button-spinner

Show a spinner within the button when waiting

src/ui/styles/style.css

@@ -204,3 +204,9 @@ body {
     justify-content: center;
     align-items: center;
 }
+
+.PolicyAgreementView_next .loader {
+    width: 15px;
+    height: 15px;
+    font-size: 3px;
+}

src/ui/views/AccountSetupView.ts

@@ -35,7 +35,9 @@ class PolicyAgreementView extends TemplateView<AccountSetupViewModel> {
                 ]),
             t.div({ className: "PolicyAgreementView_btn-collection" },
                 [
-                    t.button({ onClick: () => vm.completeRegistration(), className: "PolicyAgreementView_next", }, "Accept and continue to chat"),
+                    t.button({ onClick: () => vm.completeRegistration(), className: "PolicyAgreementView_next", },
+                        t.map(vm => vm.showButtonSpinner, (showButtonSpinner, t) => showButtonSpinner? t.div({ className: "loader" }): t.span("Accept and continue to chat"))
+                    ),
                     t.button({ onClick: () => vm.minimize(), className: "button-action PolicyAgreementView_cancel", }, "Cancel"),
                 ]),
         ]);

src/viewmodels/AccountSetupViewModel.ts

@@ -11,6 +11,7 @@ export class AccountSetupViewModel extends ViewModel {
     private _password: string;
     private _registration: any;
     private _privacyPolicyLink: string;
+    private _showButtonSpinner: boolean = false;
 
     constructor(options) {
         super(options);
@@ -66,6 +67,8 @@ export class AccountSetupViewModel extends ViewModel {
     }
 
     async completeRegistration() {
+        this._showButtonSpinner = true;
+        this.emitChange("showButtonSpinner");
         let stage = this._startStage;
         while (stage) {
             if (
@@ -113,4 +116,8 @@ export class AccountSetupViewModel extends ViewModel {
     get footerViewModel() {
         return this.options.footerVM;
     }
+
+    get showButtonSpinner(): boolean {
+        return this._showButtonSpinner;
+    }
 }