[Update/Perf] Config Page: Device Tab. Add threshold_component(dev).

Improve re-render, unnecessary, problem.

src-ui/app/App.jsx

@@ -1,4 +1,3 @@
-import { useIsOpenedConfigPage } from "@store";
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import { useStartPython } from "@logics/useStartPython";
@@ -6,14 +5,23 @@ import { useConfig } from "@logics/useConfig";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
 import styles from "./App.module.scss";
-import clsx from "clsx";
 
 export const App = () => {
+    return (
+        <div className={styles.container}>
+            <StartPythonFacadeComponent />
+            <ConfigPage />
+            <MainPage />
+        </div>
+    );
+};
+
+
+const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
-    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
     const {
         getSoftwareVersion,
         // getMicHostList,
@@ -23,6 +31,7 @@ export const App = () => {
         getSelectedSpeakerDevice,
     } = useConfig();
 
+
     useEffect(() => {
         main_page.setDecorations(true);
         if (!hasRunRef.current) {
@@ -40,17 +49,5 @@ export const App = () => {
         return () => hasRunRef.current = true;
     }, []);
 
-    return (
-        <div className={styles.container}>
-            <div className={clsx(styles.page, styles.config_page)}>
-                <ConfigPage />
-            </div>
-            <div className={clsx(styles.page, styles.main_page, {
-                [styles.show_config]: currentIsOpenedConfigPage,
-                [styles.show_main]: !currentIsOpenedConfigPage
-            })}>
-                <MainPage />
-            </div>
-        </div>
-    );
+    return null;
 };