Refactor MoreSetting component: remove loading state and optimize componentDidMount

src/components/dialogs/settingDialog/component.tsx

@@ -78,7 +78,7 @@ class SettingDialog extends React.Component<
       case "dict":
         return "Local dictionary";
       case "more":
-        return "More";
+        return "More settings";
       default:
         return "Setting";
     }

src/containers/settings/moreSetting/component.tsx

@@ -23,7 +23,6 @@ class MoreSetting extends React.Component<MoreSettingProps, MoreSettingState> {
     this.state = {
       protectionMethod: "",
       biometricAvailable: false,
-      isLoading: true,
       pinInputMode: "none",
       pinValue: "",
       pinFirstValue: "",
@@ -31,15 +30,15 @@ class MoreSetting extends React.Component<MoreSettingProps, MoreSettingState> {
     };
   }
 
-  async componentDidMount() {
-    const [method, biometricCapability] = await Promise.all([
+  componentDidMount() {
+    Promise.all([
       TokenService.getToken("protection_method"),
       getBiometricCapability(),
-    ]);
-    this.setState({
-      protectionMethod: method || "",
-      biometricAvailable: biometricCapability.available,
-      isLoading: false,
+    ]).then(([method, biometricCapability]) => {
+      this.setState({
+        protectionMethod: method || "",
+        biometricAvailable: biometricCapability.available,
+      });
     });
   }
 
@@ -188,7 +187,9 @@ class MoreSetting extends React.Component<MoreSettingProps, MoreSettingState> {
     } else if (method === "biometric") {
       if (!this.state.biometricAvailable) {
         toast.error(
-          this.props.t("Biometric authentication is not available on this device")
+          this.props.t(
+            "Biometric authentication is not available on this device"
+          )
         );
         return;
       }
@@ -288,15 +289,11 @@ class MoreSetting extends React.Component<MoreSettingProps, MoreSettingState> {
   }
 
   render() {
-    const { protectionMethod, biometricAvailable, isLoading } = this.state;
+    const { protectionMethod, biometricAvailable } = this.state;
     const isEnabled = !!protectionMethod;
     const showBiometricOption =
       biometricAvailable || protectionMethod === "biometric";
 
-    if (isLoading) {
-      return null;
-    }
-
     return (
       <>
         {this.renderPinKeypad()}

src/containers/settings/moreSetting/interface.tsx

@@ -7,7 +7,6 @@ export interface MoreSettingProps extends RouteComponentProps<any> {
 export interface MoreSettingState {
   protectionMethod: string;
   biometricAvailable: boolean;
-  isLoading: boolean;
   pinInputMode: "none" | "setup-enter" | "setup-confirm" | "verify";
   pinValue: string;
   pinFirstValue: string;