feat: implement spinner for 2fa loading (#640)

app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorAuth.ts

@@ -21,7 +21,7 @@ export const is2FAEnabled = (
 ): status is 'two-factor-enabled' => status === 'two-factor-enabled';
 
 export class TwoFactorAuth {
-  private _status: TwoFactorStatus = 'two-factor-disabled';
+  private _status: TwoFactorStatus | 'fetching' = 'fetching';
   private _errorMessage: string | null;
 
   constructor(
@@ -47,7 +47,10 @@ export class TwoFactorAuth {
 
   private startActivation(): void {
     const setDisabled = action(() => (this._status = 'two-factor-disabled'));
-    const setEnabled = action(() => this.fetchStatus());
+    const setEnabled = action(() => {
+      this._status = 'two-factor-enabled';
+      this.fetchStatus();
+    });
     this.mfaProvider
       .generateMfaSecret()
       .then(
@@ -138,7 +141,7 @@ export class TwoFactorAuth {
     return this._errorMessage;
   }
 
-  get status(): TwoFactorStatus {
+  get status(): TwoFactorStatus | 'fetching' {
     return this._status;
   }
 

app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorAuthView.tsx

@@ -4,7 +4,6 @@ import {
   Text,
   PreferencesGroup,
   PreferencesSegment,
-  LinkButton,
 } from '../../components';
 import { Switch } from '../../../components/Switch';
 import { observer } from 'mobx-react-lite';
@@ -46,15 +45,21 @@ const TwoFactorDescription: FunctionComponent<{ auth: TwoFactorAuth }> =
 
 const TwoFactorSwitch: FunctionComponent<{ auth: TwoFactorAuth }> = observer(
   ({ auth }) => {
-    if (auth.isLoggedIn() && auth.isMfaFeatureAvailable()) {
-      return (
-        <Switch
-          checked={!is2FADisabled(auth.status)}
-          onChange={auth.toggle2FA}
-        />
-      );
+    if (!(auth.isLoggedIn() && auth.isMfaFeatureAvailable())) {
+      return null;
     }
-    return null;
+
+    if (auth.status === 'fetching') {
+      return <div class="sk-spinner normal info" />;
+    }
+
+    return (
+      <Switch
+        checked={!is2FADisabled(auth.status)}
+        onChange={auth.toggle2FA}
+      />
+    );
+
   }
 );
 
@@ -70,7 +75,9 @@ export const TwoFactorAuthView: FunctionComponent<{
               <TwoFactorTitle auth={auth} />
               <TwoFactorDescription auth={auth} />
             </div>
-            <TwoFactorSwitch auth={auth} />
+            <div className="flex flex-col justify-center items-center min-w-15">
+              <TwoFactorSwitch auth={auth} />
+            </div>
           </div>
         </PreferencesSegment>
 
@@ -80,7 +87,7 @@ export const TwoFactorAuthView: FunctionComponent<{
           </PreferencesSegment>
         )}
       </PreferencesGroup>
-      {is2FAActivation(auth.status) && (
+      {auth.status !== 'fetching' && is2FAActivation(auth.status) && (
         <TwoFactorActivationView activation={auth.status} />
       )}
     </>

app/assets/stylesheets/_sn.scss

@@ -190,6 +190,10 @@
   min-width: 1.75rem;
 }
 
+.min-w-15 {
+  min-width: 3.75rem;
+}
+
 .min-h-1 {
   min-height: 0.25rem;
 }
@@ -213,3 +217,4 @@
 .pt-2 {
   padding-top: 0.5rem;
 }
+

app/assets/stylesheets/_stylekit-sub.scss

@@ -113,3 +113,11 @@ input:focus {
 .sk-button:focus-visible, button:focus-visible {
   outline: none;
 }
+
+.sk-spinner {
+  &.normal {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-width: 2px;
+  }
+}