diff --git a/src/ui/styles/style.css b/src/ui/styles/style.css index 2f318745d1caff92fd2213ea35a9e3d68f369c4e..7e7ff9c11a00b771737e248efc01dd47c4f807d8 100644 --- a/src/ui/styles/style.css +++ b/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; +} diff --git a/src/ui/views/AccountSetupView.ts b/src/ui/views/AccountSetupView.ts index 4d9d7b255d353f987c9e287d357ee66dcfaea095..1010612772d4e4ac271a7f217bebcfc78610b7c9 100644 --- a/src/ui/views/AccountSetupView.ts +++ b/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"), ]), ]); diff --git a/src/viewmodels/AccountSetupViewModel.ts b/src/viewmodels/AccountSetupViewModel.ts index 3e83fa81dbc212e099b00b4c94e0439108417ea7..6284729f54a54bb47692f9cf8f78cd430bd6be97 100644 --- a/src/viewmodels/AccountSetupViewModel.ts +++ b/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; + } }