Update encryptStorage.js

screen/settings/encryptStorage.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback, useContext } from 'react';
 import { View, ScrollView, Alert, TouchableOpacity, TouchableWithoutFeedback, Text, StyleSheet, Platform } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import navigationStyle from '../../components/navigationStyle';
-import { BlueLoading, BlueSpacing20, BlueCard, BlueText } from '../../BlueComponents';
+import { BlueSpacing20, BlueCard, BlueText } from '../../BlueComponents';
 import Biometric from '../../class/biometrics';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -14,11 +14,11 @@ const prompt = require('../../helpers/prompt');
 
 const EncryptStorage = () => {
   const { isStorageEncrypted, encryptStorage, decryptStorage, saveToDisk } = useContext(BlueStorageContext);
-  const [isLoading, setIsLoading] = useState(true);
   const [biometrics, setBiometrics] = useState({ isDeviceBiometricCapable: false, isBiometricsEnabled: false, biometricsType: '' });
   const [storageIsEncryptedSwitchEnabled, setStorageIsEncryptedSwitchEnabled] = useState(false);
   const { navigate, popToTop } = useNavigation();
   const { colors } = useTheme();
+  const [isLoading, setIsLoading] = useState({ encryptStorage: false, biometrics: false });
   const styleHooks = StyleSheet.create({
     root: {
       backgroundColor: colors.background,
@@ -35,7 +35,6 @@ const EncryptStorage = () => {
     const isStorageEncryptedSwitchEnabled = await isStorageEncrypted();
     setStorageIsEncryptedSwitchEnabled(isStorageEncryptedSwitchEnabled);
     setBiometrics({ isBiometricsEnabled, isDeviceBiometricCapable, biometricsType });
-    setIsLoading(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
@@ -63,26 +62,26 @@ const EncryptStorage = () => {
   };
 
   const onEncryptStorageSwitch = async value => {
-    setIsLoading(true);
+    setIsLoading(prev => ({ ...prev, encryptStorage: true }));
     if (value === true) {
       let p1 = await prompt(loc.settings.password, loc.settings.password_explain).catch(() => {
-        setIsLoading(false);
+        setIsLoading(prev => ({ ...prev, encryptStorage: false }));
         p1 = undefined;
       });
       if (!p1) {
-        setIsLoading(false);
+        setIsLoading(prev => ({ ...prev, encryptStorage: false }));
         return;
       }
       const p2 = await prompt(loc.settings.password, loc.settings.retype_password).catch(() => {
-        setIsLoading(false);
+        setIsLoading(prev => ({ ...prev, encryptStorage: false }));
       });
       if (p1 === p2) {
         await encryptStorage(p1);
-        setIsLoading(false);
         setStorageIsEncryptedSwitchEnabled(await isStorageEncrypted());
         saveToDisk();
+        setIsLoading(prev => ({ ...prev, encryptStorage: false }));
       } else {
-        setIsLoading(false);
+        setIsLoading(prev => ({ ...prev, encryptStorage: false }));
         triggerHapticFeedback(HapticFeedbackTypes.NotificationError);
         presentAlert({ message: loc.settings.passwords_do_not_match });
       }
@@ -94,7 +93,7 @@ const EncryptStorage = () => {
           {
             text: loc._.cancel,
             style: 'cancel',
-            onPress: () => setIsLoading(false),
+            onPress: () => setIsLoading(prev => ({ ...prev, encryptStorage: false })),
           },
           {
             text: loc._.ok,
@@ -108,6 +107,7 @@ const EncryptStorage = () => {
   };
 
   const onUseBiometricSwitch = async value => {
+    setIsLoading(prev => ({ ...prev, biometrics: true }));
     const isBiometricsEnabled = {
       isDeviceBiometricCapable: biometrics.isDeviceBiometricCapable,
       isBiometricsEnabled: biometrics.isBiometricsEnabled,
@@ -118,6 +118,7 @@ const EncryptStorage = () => {
       await Biometric.setBiometricUseEnabled(value);
       setBiometrics(isBiometricsEnabled);
     }
+    setIsLoading(prev => ({ ...prev, biometrics: false }));
   };
 
   const navigateToPlausibleDeniability = () => {
@@ -148,50 +149,55 @@ const EncryptStorage = () => {
       contentInsetAdjustmentBehavior="automatic"
       centerContent={isLoading}
     >
-      {isLoading ? (
-        <BlueLoading />
-      ) : (
+      <View style={styles.paddingTop} />
+      {biometrics.isDeviceBiometricCapable && (
         <>
-          <View style={styles.paddingTop} />
-          {biometrics.isDeviceBiometricCapable && (
-            <>
-              <Text adjustsFontSizeToFit style={[styles.headerText, styleHooks.headerText]}>
-                {loc.settings.biometrics}
-              </Text>
-              <ListItem
-                title={loc.formatString(loc.settings.encrypt_use, { type: biometrics.biometricsType })}
-                Component={TouchableWithoutFeedback}
-                switch={{ value: biometrics.isBiometricsEnabled, onValueChange: onUseBiometricSwitch }}
-              />
-              <BlueCard>
-                <BlueText>{loc.formatString(loc.settings.encrypt_use_expl, { type: biometrics.biometricsType })}</BlueText>
-                {renderPasscodeExplanation()}
-              </BlueCard>
-              <BlueSpacing20 />
-            </>
-          )}
           <Text adjustsFontSizeToFit style={[styles.headerText, styleHooks.headerText]}>
-            {loc.settings.encrypt_tstorage}
+            {loc.settings.biometrics}
           </Text>
           <ListItem
-            testID="EncryptedAndPasswordProtected"
-            hideChevron
-            title={loc.settings.encrypt_enc_and_pass}
+            title={loc.formatString(loc.settings.encrypt_use, { type: biometrics.biometricsType })}
             Component={TouchableWithoutFeedback}
-            switch={{ onValueChange: onEncryptStorageSwitch, value: storageIsEncryptedSwitchEnabled }}
+            isLoading={isLoading.biometrics}
+            containerStyle={[styles.rowItemContainerStyle, styleHooks.root]}
+            switch={{
+              value: biometrics.isBiometricsEnabled,
+              onValueChange: onUseBiometricSwitch,
+              disabled: isLoading.encryptStorage || isLoading.biometrics,
+            }}
           />
-          {storageIsEncryptedSwitchEnabled && (
-            <ListItem
-              onPress={navigateToPlausibleDeniability}
-              title={loc.settings.plausible_deniability}
-              chevron
-              testID="PlausibleDeniabilityButton"
-              Component={TouchableOpacity}
-            />
-          )}
+          <BlueCard>
+            <BlueText>{loc.formatString(loc.settings.encrypt_use_expl, { type: biometrics.biometricsType })}</BlueText>
+            {renderPasscodeExplanation()}
+          </BlueCard>
+          <BlueSpacing20 />
         </>
       )}
-      {isLoading && <BlueLoading />}
+      <Text adjustsFontSizeToFit style={[styles.headerText, styleHooks.headerText]}>
+        {loc.settings.encrypt_tstorage}
+      </Text>
+      <ListItem
+        testID="EncryptedAndPasswordProtected"
+        hideChevron
+        isLoading={isLoading.encryptStorage}
+        title={loc.settings.encrypt_enc_and_pass}
+        Component={TouchableWithoutFeedback}
+        containerStyle={[styles.rowItemContainerStyle, styleHooks.root]}
+        switch={{
+          onValueChange: onEncryptStorageSwitch,
+          value: storageIsEncryptedSwitchEnabled,
+          disabled: isLoading.encryptStorage || isLoading.biometrics,
+        }}
+      />
+      {storageIsEncryptedSwitchEnabled && (
+        <ListItem
+          onPress={navigateToPlausibleDeniability}
+          title={loc.settings.plausible_deniability}
+          chevron
+          testID="PlausibleDeniabilityButton"
+          Component={TouchableOpacity}
+        />
+      )}
     </ScrollView>
   );
 };
@@ -203,6 +209,9 @@ const styles = StyleSheet.create({
     fontSize: 30,
     marginLeft: 17,
   },
+  rowItemContainerStyle: {
+    minHeight: 60,
+  },
 });
 
 export default EncryptStorage;