[Refactor] Change state management structures. Async atom to be manage manually.

data.js

@@ -1,10 +1,10 @@
 export const translator_status = [
-    { translator_id: "DeepL", translator_name: "DeepL", is_available: true },
+    { translator_id: "DeepL", translator_name: "DeepL", is_available: false },
     { translator_id: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false },
-    { translator_id: "Google", translator_name: "Google", is_available: true },
+    { translator_id: "Google", translator_name: "Google", is_available: false },
-    { translator_id: "Bing", translator_name: "Bing", is_available: true },
+    { translator_id: "Bing", translator_name: "Bing", is_available: false },
-    { translator_id: "Papago", translator_name: "Papago", is_available: true },
+    { translator_id: "Papago", translator_name: "Papago", is_available: false },
-    { translator_id: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: true },
+    { translator_id: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: false },
 ];
 
 

src-ui/app/App.jsx

@@ -124,7 +124,7 @@ const ConfigPageCloseTrigger = () => {
     } = useVolume();
 
     useEffect(() => {
-        if (currentIsOpenedConfigPage === false) {
+        if (currentIsOpenedConfigPage.data === false) {
             if (currentMicThresholdCheckStatus.data === true) volumeCheckStop_Mic();
             if (currentSpeakerThresholdCheckStatus.data === true) volumeCheckStop_Speaker();
         }

src-ui/app/config_page/ConfigPage.jsx

@@ -21,7 +21,7 @@ export const ConfigPage = () => {
                 </div>
                 <p className={styles.software_version}>
                     {
-                        t("config_page.version", {version: currentSoftwareVersion})
+                        t("config_page.version", {version: currentSoftwareVersion.data})
                     }
                 </p>
             </div>

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -7,7 +7,7 @@ import { Appearance } from "./appearance/Appearance";
 
 export const SettingBox = () => {
     const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
-    switch (currentSelectedConfigTabId) {
+    switch (currentSelectedConfigTabId.data) {
         case "device":
             return <Device />;
         // case "others":

src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx

@@ -74,7 +74,7 @@ export const AboutVrct = () => {
                 <img src={special_thanks_section_title} className={clsx(styles.section_title, styles.special_thanks)} />
                 <img src={special_thanks_members} className={styles.special_thanks_members_img} />
                 {
-                    currentUiLanguage === "ja"
+                    currentUiLanguage.data === "ja"
                     ? <img src={special_thanks_message_ja} className={styles.special_thanks_message_img} />
                     : <img src={special_thanks_message_en} className={styles.special_thanks_message_img} />
                 }

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx

@@ -19,7 +19,7 @@ export const PosterShowcaseWorldsContents = () => {
     }));
 
     const chunked_poster_showcase_world_images = chunkArray(poster_showcase_world_images, 8);
-    const target_poster_showcase_world_images = chunked_poster_showcase_world_images[currentPosterShowcaseWorldPageIndex];
+    const target_poster_showcase_world_images = chunked_poster_showcase_world_images[currentPosterShowcaseWorldPageIndex.data];
 
 
     return (
@@ -70,7 +70,7 @@ const PosterShowcaseWorldsPagination = ({ page_length }) => {
     };
 
     const getClassNames = (index, baseClass) => clsx(baseClass, {
-        [styles.is_active]: (currentPosterShowcaseWorldPageIndex === index),
+        [styles.is_active]: (currentPosterShowcaseWorldPageIndex.data === index),
     });
 
     return (

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx

@@ -34,11 +34,11 @@ export const PostersContents = () => {
 
 
     const updateIndex = (delta) => {
-        const newIndex = (currentVrctPosterIndex + delta + poster_images.length) % poster_images.length;
+        const newIndex = (currentVrctPosterIndex.data + delta + poster_images.length) % poster_images.length;
         updateVrctPosterIndex(newIndex);
     };
 
-    const current_poster = poster_images[currentVrctPosterIndex];
+    const current_poster = poster_images[currentVrctPosterIndex.data];
     const current_poster_authors_img_ja = (current_poster.poster_type === "poster") ? poster_images_authors_ja : poster_images_authors_m_ja;
     const current_poster_authors_img_en = (current_poster.poster_type === "poster") ? poster_images_authors_en : poster_images_authors_m_en;
 
@@ -60,7 +60,7 @@ export const PostersContents = () => {
                 </button>
             </div>
             {
-                currentUiLanguage === "ja"
+                currentUiLanguage.data === "ja"
                 ? <img src={current_poster_authors_img_ja} className={styles.poster_authors_img} />
                 : <img src={current_poster_authors_img_en} className={styles.poster_authors_img} />
             }

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -101,7 +101,7 @@ const UiLanguageContainer = () => {
                 }
             </div>
             <div className={styles.ui_language_selector_container}>
-                {currentUiLanguage.state === "loading" && <span className={styles.loader}></span>}
+                {currentUiLanguage.state === "pending" && <span className={styles.loader}></span>}
                 {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
                     <label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
                         <input

src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx

@@ -4,7 +4,7 @@ export const Checkbox = (props) => {
     return (
         <div className={styles.checkbox_container}>
             <label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
-                {(props.state === "loading")
+                {(props.state === "pending")
                     ? <span className={styles.loader}></span>
                     : <input
                         type="checkbox"

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx

@@ -7,7 +7,7 @@ export const DropdownMenu = (props) => {
     const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
     const toggleDropdownMenu = () => {
-        if (currentIsOpenedDropdownMenu === props.dropdown_id) {
+        if (currentIsOpenedDropdownMenu.data === props.dropdown_id) {
             updateIsOpenedDropdownMenu("");
         } else {
             if (props.openListFunction !== undefined) props.openListFunction();
@@ -24,21 +24,21 @@ export const DropdownMenu = (props) => {
     };
 
     const dropdown_content_wrapper_class_name = clsx(styles["dropdown_content_wrapper"], {
-        [styles.is_opened]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false,
+        [styles.is_opened]: (currentIsOpenedDropdownMenu.data === props.dropdown_id) ? true : false,
         [styles.is_disabled]: props.is_disabled,
     });
 
     const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {
-        [styles.is_loading]: (props.state === "loading") ? true : false,
+        [styles.is_loading]: (props.state === "pending") ? true : false,
         [styles.is_disabled]: props.is_disabled,
     });
 
     const arrow_class_names = clsx(styles["arrow_left_svg"], {
-        [styles.is_opened]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
+        [styles.is_opened]: (currentIsOpenedDropdownMenu.data === props.dropdown_id) ? true : false
     });
 
     const getSelectedText = () => {
-        if (props.state !== "hasData") return;
+        if (props.state !== "ok") return;
         return props.selected_id;
     };
     const list = (props.list === undefined) ? {} : props.list;
@@ -46,18 +46,18 @@ export const DropdownMenu = (props) => {
     return (
         <div className={styles.container}>
             <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu} style={props.style}>
-                {(props.state === "loading")
+                {(props.state === "pending")
                     ? <p className={styles.dropdown_selected_text}>Loading...</p>
                     : <p className={styles.dropdown_selected_text}>{getSelectedText()}</p>
                 }
-                {(props.state === "loading")
+                {(props.state === "pending")
                     ? <span className={styles.loader}></span>
                     : <ArrowLeftSvg className={arrow_class_names} />
                 }
             </div>
             <div className={dropdown_content_wrapper_class_name}>
                 <div className={styles.dropdown_content}>
-                    {(props.state === "hasData")
+                    {(props.state === "ok")
                         ? Object.entries(list).map(([key, value]) => {
                             return (
                                 <div key={key} className={styles.value_button} onClick={() => selectValue(key)}>

src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx

@@ -56,7 +56,7 @@ const ExampleComponent = ({ id, current_format }) => {
         let format = current_format;
 
         if (["send_with_t", "received_with_t"].includes(id)) {
-            const translationLocale = currentUiLanguage === "en" ? "ja" : "en";
+            const translationLocale = currentUiLanguage.data === "en" ? "ja" : "en";
             const translatedLangMessage = t("config_page.send_message_format.example_text", { lng: translationLocale });
 
             return format.is_message_first

src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx

@@ -7,7 +7,7 @@ export const RadioButton = (props) => {
                 <label key={option.radio_button_id} className={styles.radio_button_wrapper}>
                     {props.checked_variable.data === option.radio_button_id
                         ? <>
-                            { props.checked_variable.state === "loading" && <span className={styles.loader}></span> }
+                            { props.checked_variable.state === "pending" && <span className={styles.loader}></span> }
                             <input
                                 type="radio"
                                 name="radio"

src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx

@@ -6,7 +6,7 @@ export const Switchbox = (props) => {
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 
-    const is_loading = (props.variable.state === "loading");
+    const is_loading = (props.variable.state === "pending");
 
     const getClassNames = (base_class) => clsx(base_class, {
         [styles.is_active]: (props.variable.data === true),

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx

@@ -22,7 +22,7 @@ const MicComponent = (props) => {
         setMicThreshold,
         currentEnableAutomaticMicThreshold,
     } = useMicThreshold();
-    const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
+    const [ui_threshold, setUiThreshold] = useState(currentMicThreshold.data);
     const {
         volumeCheckStart_Mic,
         volumeCheckStop_Mic,
@@ -34,9 +34,9 @@ const MicComponent = (props) => {
         if (currentEnableAutomaticMicThreshold.data === true) {
             setUiThreshold("Auto");
         } else {
-            setUiThreshold(currentMicThreshold);
+            setUiThreshold(currentMicThreshold.data);
         }
-    }, [currentMicThreshold, currentEnableAutomaticMicThreshold]);
+    }, [currentMicThreshold.data, currentEnableAutomaticMicThreshold]);
 
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);
@@ -80,7 +80,7 @@ const SpeakerComponent = (props) => {
         setSpeakerThreshold,
         currentEnableAutomaticSpeakerThreshold,
     } = useSpeakerThreshold();
-    const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
+    const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold.data);
     const {
         volumeCheckStart_Speaker,
         volumeCheckStop_Speaker,
@@ -91,9 +91,9 @@ const SpeakerComponent = (props) => {
         if (currentEnableAutomaticSpeakerThreshold.data === true) {
             setUiThreshold("Auto");
         } else {
-            setUiThreshold(currentSpeakerThreshold);
+            setUiThreshold(currentSpeakerThreshold.data);
         }
-    }, [currentSpeakerThreshold, currentEnableAutomaticSpeakerThreshold]);
+    }, [currentSpeakerThreshold.data, currentEnableAutomaticSpeakerThreshold]);
 
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 export const VolumeCheckButton = React.memo((props) => {
     const getClassNames = (baseClass) => clsx(baseClass, {
         [styles.is_active]: (props.isChecking?.data === true),
-        [styles.is_loading]: (props.isChecking.state === "loading"),
+        [styles.is_loading]: (props.isChecking.state === "pending"),
     });
 
     const toggleFunction = () => {

src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx

@@ -15,7 +15,7 @@ export const WordFilter = () => {
         if (input_value === undefined) return;
         const input_value_array = input_value.split(",");
 
-        let updated_list = [...currentWordFilterList];
+        let updated_list = [...currentWordFilterList.data];
 
         for (let each_input_value of input_value_array) {
             each_input_value = each_input_value.trim();
@@ -57,10 +57,10 @@ export const WordFilter = () => {
 
     return (
         <div className={styles.container}>
-            { currentIsOpenedWordFilterList &&
+            { currentIsOpenedWordFilterList.data &&
             <div className={styles.list_section_wrapper}>
                 {
-                    currentWordFilterList.map((item, index) => {
+                    currentWordFilterList.data.map((item, index) => {
                         return <WordFilterItem value={item.value} key={index} is_redoable={item.is_redoable} deleteAction={deleteAction} redoAction={redoAction}/>;
                     })
                 }
@@ -117,15 +117,15 @@ export const WordFilterListToggleComponent = (props) => {
 
 
     const svg_class_names = clsx(styles["arrow_left_svg"], {
-        [styles.to_down]: !currentIsOpenedWordFilterList,
+        [styles.to_down]: !currentIsOpenedWordFilterList.data,
-        [styles.to_up]: currentIsOpenedWordFilterList
+        [styles.to_up]: currentIsOpenedWordFilterList.data
     });
 
     const OnclickFunction = () => {
-        updateIsOpenedWordFilterList(!currentIsOpenedWordFilterList);
+        updateIsOpenedWordFilterList(!currentIsOpenedWordFilterList.data);
     };
 
-    const word_filter_list_length = currentWordFilterList.filter(item => item.is_redoable === false).length;
+    const word_filter_list_length = currentWordFilterList.data.filter(item => item.is_redoable === false).length;
 
 
     return (

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -35,11 +35,12 @@ const Mic_Container = () => {
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
     const { currentEnableAutomaticMicThreshold, toggleEnableAutomaticMicThreshold } = useMicThreshold();
 
+
     const selectFunction_host = (selected_data) => {
         setSelectedMicHost(selected_data.selected_id);
     };
 
-    const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "loading";
+    const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "pending";
 
     const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
     const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
@@ -143,7 +144,7 @@ const Speaker_Container = () => {
         setSelectedSpeakerDevice(selected_data.selected_id);
     };
 
-    const is_disabled_selector = currentEnableAutoSpeakerSelect.data === true || currentEnableAutoSpeakerSelect.data === "loading";
+    const is_disabled_selector = currentEnableAutoSpeakerSelect.data === true || currentEnableAutoSpeakerSelect.data === "pending";
 
     const getLabels = () => {
         if (currentEnableAutomaticSpeakerThreshold.data === true) {

src-ui/app/config_page/sidebar_section/SidebarSection.jsx

@@ -32,10 +32,10 @@ const Tab = (props) => {
     };
 
     const tab_container_class_names = clsx(styles["tab_container"], {
-        [styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
+        [styles["is_selected"]]: (currentSelectedConfigTabId.data === props.tab_id) ? true : false
     });
     const switch_indicator_class_names = clsx(styles["switch_indicator"], {
-        [styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
+        [styles["is_selected"]]: (currentSelectedConfigTabId.data === props.tab_id) ? true : false
     });
 
     return (

src-ui/app/config_page/topbar/Topbar.jsx

@@ -16,8 +16,8 @@ export const Topbar = () => {
 
     return (
         <div className={clsx(styles.container, {
-            [styles.show_config]: currentIsOpenedConfigPage,
+            [styles.show_config]: currentIsOpenedConfigPage.data,
-            [styles.show_main]: !currentIsOpenedConfigPage
+            [styles.show_main]: !currentIsOpenedConfigPage.data
         })}>
             <div className={styles.wrapper} onClick={() => closeConfigPage()}>
                 <div className={styles.go_back_button}>

src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx

@@ -7,7 +7,7 @@ export const SectionTitleBox = () => {
     const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
     return (
         <div className={styles.container}>
-            <p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
+            <p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId.data}`)}</p>
         </div>
     );
 };

src-ui/app/main_page/MainPage.jsx

@@ -9,8 +9,8 @@ export const MainPage = () => {
 
     return (
         <div className={clsx(styles.page, styles.main_page, {
-            [styles.show_config]: currentIsOpenedConfigPage,
+            [styles.show_config]: currentIsOpenedConfigPage.data,
-            [styles.show_main]: !currentIsOpenedConfigPage
+            [styles.show_main]: !currentIsOpenedConfigPage.data
         })}>
             <div className={styles.container}>
                 <SidebarSection />

src-ui/app/main_page/main_section/MainSection.jsx

@@ -28,10 +28,10 @@ const HandleLanguageSelector = () => {
         setSelectedTargetLanguages,
     } = useLanguageSettings();
 
-    if (currentIsOpenedLanguageSelector.your_language === true) {
+    if (currentIsOpenedLanguageSelector.data.your_language === true) {
         const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload);
         return <LanguageSelector id="your_language" onClickFunction={onclickFunction_YourLanguage}/>;
-    } else if (currentIsOpenedLanguageSelector.target_language === true) {
+    } else if (currentIsOpenedLanguageSelector.data.target_language === true) {
         const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload);
         return <LanguageSelector id="target_language" onClickFunction={onclickFunction_TargetLanguage}/>;
     } else {

src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx

@@ -27,7 +27,7 @@ export const LanguageSelector = ({ id, onClickFunction }) => {
         }, {});
     };
 
-    const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList);
+    const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList.data);
 
     return (
         <div className={styles.container}>

src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx

@@ -1,20 +1,22 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import styles from "./LogBox.module.scss";
-import { useStore_MessageLogs, store } from "@store";
+import { store } from "@store";
 import { MessageContainer } from "./message_container/MessageContainer";
 import { scrollToBottom } from "@utils/scrollToBottom";
+import { useMessage } from "@logics_common/useMessage";
 
 export const LogBox = () => {
-    const { currentMessageLogs } = useStore_MessageLogs();
+    const { currentMessageLogs } = useMessage();
     const log_container_ref = useRef(null);
     const [is_scrolling, setIsScrolling] = useState(false);
 
+
     useLayoutEffect(() => {
         store.log_box_ref = log_container_ref;
         if (!is_scrolling) {
             scrollToBottom(store.log_box_ref, true);
         }
-    }, [currentMessageLogs]);
+    }, [currentMessageLogs.data]);
 
     useEffect(() => {
         const handleScroll = () => {
@@ -39,7 +41,7 @@ export const LogBox = () => {
 
     return (
         <div id="log_container" className={styles.container} ref={log_container_ref}>
-            {currentMessageLogs.map(message_data => (
+            {currentMessageLogs.data.map(message_data => (
                 <MessageContainer key={message_data.id} {...message_data} />
             ))}
         </div>

src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx

@@ -8,11 +8,11 @@ export const SidebarCompactModeButton = () => {
     const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const toggleCompactMode = () => {
-        updateIsMainPageCompactMode(!currentIsMainPageCompactMode);
+        updateIsMainPageCompactMode(!currentIsMainPageCompactMode.data);
     };
 
     const class_names = clsx(styles["arrow_left_svg"], {
-        [styles["reverse"]]: currentIsMainPageCompactMode
+        [styles["reverse"]]: currentIsMainPageCompactMode.data
     });
 
     return (

src-ui/app/main_page/sidebar_section/SidebarSection.jsx

@@ -11,12 +11,12 @@ import { OpenSettings } from "./open_settings/OpenSettings";
 export const SidebarSection = () => {
     const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
     const container_class_name = clsx(styles.container, {
-        [styles.is_compact_mode]: currentIsMainPageCompactMode
+        [styles.is_compact_mode]: currentIsMainPageCompactMode.data
     });
 
     const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
     const scroll_container_class_names = clsx(styles.scroll_container, {
-        [styles.is_opened]: (currentIsOpenedLanguageSelector.your_language === true || currentIsOpenedLanguageSelector.target_language === true)
+        [styles.is_opened]: (currentIsOpenedLanguageSelector.data.your_language === true || currentIsOpenedLanguageSelector.data.target_language === true)
     });
 
     return (
@@ -24,7 +24,7 @@ export const SidebarSection = () => {
             <Logo />
             <div className={scroll_container_class_names}>
                 <MainFunctionSwitch />
-                {!currentIsMainPageCompactMode && <LanguageSettings />}
+                {!currentIsMainPageCompactMode.data && <LanguageSettings />}
             </div>
             <OpenSettings />
         </div>

src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx

@@ -62,8 +62,8 @@ const PresetContainer = () => {
 
     const yourLanguageSettings = {
         title: t("main_page.your_language"),
-        is_opened: currentIsOpenedLanguageSelector.your_language,
+        is_opened: currentIsOpenedLanguageSelector.data.your_language,
-        onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.your_language, updateIsOpenedLanguageSelector),
+        onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.data.your_language, updateIsOpenedLanguageSelector),
         TurnedOnSvgComponent: <MicSvg />,
         is_turned_on: currentTranscriptionSendStatus.data,
         variable: your_language_data?.primary,
@@ -71,8 +71,8 @@ const PresetContainer = () => {
 
     const targetLanguageSettings = {
         title: t("main_page.target_language"),
-        is_opened: currentIsOpenedLanguageSelector.target_language,
+        is_opened: currentIsOpenedLanguageSelector.data.target_language,
-        onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.target_language, updateIsOpenedLanguageSelector),
+        onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.data.target_language, updateIsOpenedLanguageSelector),
         TurnedOnSvgComponent: <HeadphonesSvg />,
         is_turned_on: currentTranscriptionReceiveStatus.data,
         variable: target_language_data?.primary,

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx

@@ -14,11 +14,10 @@ export const TranslatorSelectorOpenButton = () => {
         currentSelectedTranslationEngines,
     } = useLanguageSettings();
 
-    // console.log(currentTranslationEngines, currentSelectedTranslationEngines);
+    const selected_translator_name = (currentTranslationEngines.state === "pending")
-    const selected_translator_name = (currentTranslationEngines.state === "loading")
     ? "Loading..."
     : currentTranslationEngines.data.find(
-        translator_data => translator_data.translator_id === currentSelectedTranslationEngines[currentSelectedPresetTabNumber.data]
+        translator_data => translator_data.translator_id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data]
     )?.translator_name;
 
 
@@ -26,7 +25,7 @@ export const TranslatorSelectorOpenButton = () => {
 
     const openTranslatorSelector = () => {
         getTranslationEngines();
-        updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
+        updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector.data);
     };
 
     return (
@@ -35,7 +34,7 @@ export const TranslatorSelectorOpenButton = () => {
                 <p className={styles.label}>{t("main_page.translator")}: </p>
                 <p className={styles.label}>{selected_translator_name}</p>
             </div>
-            {currentIsOpenedTranslatorSelector &&
+            {currentIsOpenedTranslatorSelector.data &&
                 <TranslatorSelector
                     selected_translator_id={currentSelectedTranslationEngines}
                     translation_engines={currentTranslationEngines}

src-ui/app/main_page/sidebar_section/logo/Logo.jsx

@@ -15,7 +15,7 @@ import { useStore_IsMainPageCompactMode } from "@store";
 
 export const LogoBox = () => {
     const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
-    if (currentIsMainPageCompactMode === true) {
+    if (currentIsMainPageCompactMode.data === true) {
         return <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />;
     } else {
         return <img src={vrct_logo} className={styles.logo} alt="VRCT logo" />;

src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx

@@ -77,9 +77,9 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
     const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const getClassNames = (baseClass) => clsx(baseClass, {
-        [styles.is_compact_mode]: currentIsMainPageCompactMode,
+        [styles.is_compact_mode]: currentIsMainPageCompactMode.data,
         [styles.is_active]: (currentState.data === true),
-        [styles.is_loading]: (currentState.state === "loading"),
+        [styles.is_loading]: (currentState.state === "pending"),
         [styles.is_hovered]: is_hovered,
         [styles.is_mouse_down]: is_mouse_down,
     });
@@ -108,7 +108,7 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
             </div>
 
             <div className={getClassNames(styles.switch_indicator)}></div>
-            {(currentState.state === "loading")
+            {(currentState.state === "pending")
                 ? <span className={styles.loader}></span>
                 : null
             }

src-ui/logics/common/useMessage.js

@@ -71,8 +71,8 @@ const generateMessageObject = (data, category) => {
 };
 
 
-const updateItemById = (id, translated_data) => (prev_items) => {
+const updateItemById = (id, translated_data) => (current_items) => {
-    return prev_items.map(item => {
+    return current_items.data.map(item => {
         if (item.id === id) {
             item.status = "ok";
             item.messages.translated = translated_data;

src-ui/logics/common/useVolume.js

@@ -11,17 +11,24 @@ export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicVolume } = useStore_MicVolume();
     const { updateSpeakerVolume } = useStore_SpeakerVolume();
-    const { currentMicThresholdCheckStatus, updateMicThresholdCheckStatus } = useStore_MicThresholdCheckStatus();
+    const {
-    const { currentSpeakerThresholdCheckStatus, updateSpeakerThresholdCheckStatus } = useStore_SpeakerThresholdCheckStatus();
+        currentMicThresholdCheckStatus,
+        updateMicThresholdCheckStatus,
+        pendingMicThresholdCheckStatus,
+    } = useStore_MicThresholdCheckStatus();
+    const {
+        currentSpeakerThresholdCheckStatus,
+        updateSpeakerThresholdCheckStatus,
+        pendingSpeakerThresholdCheckStatus,
+    } = useStore_SpeakerThresholdCheckStatus();
 
-    const asyncPending = () => new Promise(() => {});
     return {
         volumeCheckStart_Mic: () => {
-            updateMicThresholdCheckStatus(asyncPending);
+            pendingMicThresholdCheckStatus();
             asyncStdoutToPython("/set/enable_check_mic_threshold");
         },
         volumeCheckStop_Mic: () => {
-            updateMicThresholdCheckStatus(asyncPending);
+            pendingMicThresholdCheckStatus();
             asyncStdoutToPython("/set/disable_check_mic_threshold");
         },
         updateVolumeVariable_Mic: (payload) => {
@@ -35,11 +42,11 @@ export const useVolume = () => {
 
         volumeCheckStart_Speaker: () => {
             updateSpeakerVolume("0");
-            updateSpeakerThresholdCheckStatus(asyncPending);
+            pendingSpeakerThresholdCheckStatus();
             asyncStdoutToPython("/set/enable_check_speaker_threshold");
         },
         volumeCheckStop_Speaker: () => {
-            updateSpeakerThresholdCheckStatus(asyncPending);
+            pendingSpeakerThresholdCheckStatus();
             asyncStdoutToPython("/set/disable_check_speaker_threshold");
         },
         updateVolumeVariable_Speaker: (payload) => {

src-ui/logics/configs/useEnableAutoClearMessageBox.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useEnableAutoClearMessageBox = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox, pendingEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox();
 
     const getEnableAutoClearMessageBox = () => {
-        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        pendingEnableAutoClearMessageBox();
         asyncStdoutToPython("/get/auto_clear_message_box");
     };
 
     const toggleEnableAutoClearMessageBox = () => {
-        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        pendingEnableAutoClearMessageBox();
         if (currentEnableAutoClearMessageBox.data) {
             asyncStdoutToPython("/set/disable_auto_clear_message_box");
         } else {

src-ui/logics/configs/useEnableAutoMicSelect.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useEnableAutoMicSelect = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoMicSelect, updateEnableAutoMicSelect } = useStore_EnableAutoMicSelect();
+    const { currentEnableAutoMicSelect, updateEnableAutoMicSelect, pendingEnableAutoMicSelect } = useStore_EnableAutoMicSelect();
 
     const getEnableAutoMicSelect = () => {
-        updateEnableAutoMicSelect(() => new Promise(() => {}));
+        pendingEnableAutoMicSelect();
         asyncStdoutToPython("/get/auto_mic_select");
     };
 
     const toggleEnableAutoMicSelect = () => {
-        updateEnableAutoMicSelect(() => new Promise(() => {}));
+        pendingEnableAutoMicSelect();
         if (currentEnableAutoMicSelect.data) {
             asyncStdoutToPython("/set/disable_auto_mic_select");
         } else {

src-ui/logics/configs/useEnableAutoSpeakerSelect.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useEnableAutoSpeakerSelect = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoSpeakerSelect, updateEnableAutoSpeakerSelect } = useStore_EnableAutoSpeakerSelect();
+    const { currentEnableAutoSpeakerSelect, updateEnableAutoSpeakerSelect, pendingEnableAutoSpeakerSelect } = useStore_EnableAutoSpeakerSelect();
 
     const getEnableAutoSpeakerSelect = () => {
-        updateEnableAutoSpeakerSelect(() => new Promise(() => {}));
+        pendingEnableAutoSpeakerSelect();
         asyncStdoutToPython("/get/auto_speaker_select");
     };
 
     const toggleEnableAutoSpeakerSelect = () => {
-        updateEnableAutoSpeakerSelect(() => new Promise(() => {}));
+        pendingEnableAutoSpeakerSelect();
         if (currentEnableAutoSpeakerSelect.data) {
             asyncStdoutToPython("/set/disable_auto_speaker_select");
         } else {

src-ui/logics/configs/useMicDeviceList.js

@@ -3,10 +3,10 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMicDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicDeviceList, updateMicDeviceList } = useStore_MicDeviceList();
+    const { currentMicDeviceList, updateMicDeviceList, pendingMicDeviceList } = useStore_MicDeviceList();
 
     const getMicDeviceList = () => {
-        updateMicDeviceList(() => new Promise(() => {}));
+        pendingMicDeviceList();
         asyncStdoutToPython("/get/list_mic_device");
     };
 

src-ui/logics/configs/useMicHostList.js

@@ -3,10 +3,10 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMicHostList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicHostList, updateMicHostList } = useStore_MicHostList();
+    const { currentMicHostList, updateMicHostList, pendingMicHostList } = useStore_MicHostList();
 
     const getMicHostList = () => {
-        updateMicHostList(() => new Promise(() => {}));
+        pendingMicHostList();
         asyncStdoutToPython("/get/list_mic_host");
     };
 

src-ui/logics/configs/useMicThreshold.js

@@ -4,7 +4,7 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 export const useMicThreshold = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
-    const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
+    const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold, pendingEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
 
     const getMicThreshold = () => {
         asyncStdoutToPython("/get/mic_energy_threshold");
@@ -15,12 +15,12 @@ export const useMicThreshold = () => {
     };
 
     const getEnableAutomaticMicThreshold = () => {
-        updateEnableAutomaticMicThreshold(() => new Promise(() => {}));
+        pendingEnableAutomaticMicThreshold();
         asyncStdoutToPython("/get/mic_dynamic_energy_threshold");
     };
 
     const toggleEnableAutomaticMicThreshold = () => {
-        updateEnableAutomaticMicThreshold(() => new Promise(() => {}));
+        pendingEnableAutomaticMicThreshold();
         if (currentEnableAutomaticMicThreshold.data) {
             asyncStdoutToPython("/set/disable_mic_dynamic_energy_threshold");
         } else {

src-ui/logics/configs/useSelectedMicDevice.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSelectedMicDevice = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
+    const { currentSelectedMicDevice, updateSelectedMicDevice, pendingSelectedMicDevice } = useStore_SelectedMicDevice();
 
     const getSelectedMicDevice = () => {
-        updateSelectedMicDevice(() => new Promise(() => {}));
+        pendingSelectedMicDevice();
         asyncStdoutToPython("/get/selected_mic_device");
     };
 
     const setSelectedMicDevice = (selected_mic_device) => {
-        updateSelectedMicDevice(() => new Promise(() => {}));
+        pendingSelectedMicDevice();
         asyncStdoutToPython("/set/selected_mic_device", selected_mic_device);
     };
 

src-ui/logics/configs/useSelectedMicHost.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSelectedMicHost = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedMicHost, updateSelectedMicHost } = useStore_SelectedMicHost();
+    const { currentSelectedMicHost, updateSelectedMicHost, pendingSelectedMicHost } = useStore_SelectedMicHost();
 
     const getSelectedMicHost = () => {
-        updateSelectedMicHost(() => new Promise(() => {}));
+        pendingSelectedMicHost();
         asyncStdoutToPython("/get/selected_mic_host");
     };
 
     const setSelectedMicHost = (selected_mic_host) => {
-        updateSelectedMicHost(() => new Promise(() => {}));
+        pendingSelectedMicHost();
         asyncStdoutToPython("/set/selected_mic_host", selected_mic_host);
     };
 

src-ui/logics/configs/useSelectedSpeakerDevice.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSelectedSpeakerDevice = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice, pendingSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
 
     const getSelectedSpeakerDevice = () => {
-        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        pendingSelectedSpeakerDevice();
         asyncStdoutToPython("/get/selected_speaker_device");
     };
 
     const setSelectedSpeakerDevice = (selected_speaker_device) => {
-        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        pendingSelectedSpeakerDevice();
         asyncStdoutToPython("/set/selected_speaker_device", selected_speaker_device);
     };
 

src-ui/logics/configs/useSendMessageButtonType.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSendMessageButtonType = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSendMessageButtonType, updateSendMessageButtonType } = useStore_SendMessageButtonType();
+    const { currentSendMessageButtonType, updateSendMessageButtonType, pendingSendMessageButtonType } = useStore_SendMessageButtonType();
 
     const getSendMessageButtonType = () => {
-        updateSendMessageButtonType(() => new Promise(() => {}));
+        pendingSendMessageButtonType();
         asyncStdoutToPython("/get/send_message_button_type");
     };
 
     const setSendMessageButtonType = (selected_type) => {
-        updateSendMessageButtonType(() => new Promise(() => {}));
+        pendingSendMessageButtonType();
         asyncStdoutToPython("/set/send_message_button_type", selected_type);
     };
 

src-ui/logics/configs/useSoftwareVersion.js

@@ -3,10 +3,10 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSoftwareVersion = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSoftwareVersion, updateSoftwareVersion } = useStore_SoftwareVersion();
+    const { currentSoftwareVersion, updateSoftwareVersion, pendingSoftwareVersion } = useStore_SoftwareVersion();
 
     const getSoftwareVersion = () => {
-        updateSoftwareVersion(() => new Promise(() => {}));
+        pendingSoftwareVersion();
         asyncStdoutToPython("/get/version");
     };
 

src-ui/logics/configs/useSpeakerDeviceList.js

@@ -3,10 +3,10 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useSpeakerDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStore_SpeakerDeviceList();
+    const { currentSpeakerDeviceList, updateSpeakerDeviceList, pendingSpeakerDeviceList } = useStore_SpeakerDeviceList();
 
     const getSpeakerDeviceList = () => {
-        updateSpeakerDeviceList(() => new Promise(() => {}));
+        pendingSpeakerDeviceList();
         asyncStdoutToPython("/get/list_speaker_device");
     };
 

src-ui/logics/configs/useSpeakerThreshold.js

@@ -4,7 +4,7 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 export const useSpeakerThreshold = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
-    const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
+    const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold, pendingEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
 
     const getSpeakerThreshold = () => {
         asyncStdoutToPython("/get/speaker_energy_threshold");
@@ -15,12 +15,12 @@ export const useSpeakerThreshold = () => {
     };
 
     const getEnableAutomaticSpeakerThreshold = () => {
-        updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {}));
+        pendingEnableAutomaticSpeakerThreshold();
         asyncStdoutToPython("/get/speaker_dynamic_energy_threshold");
     };
 
     const toggleEnableAutomaticSpeakerThreshold = () => {
-        updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {}));
+        pendingEnableAutomaticSpeakerThreshold();
         if (currentEnableAutomaticSpeakerThreshold.data) {
             asyncStdoutToPython("/set/disable_speaker_dynamic_energy_threshold");
         } else {

src-ui/logics/configs/useUiLanguage.js

@@ -3,15 +3,15 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useUiLanguage = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentUiLanguage, updateUiLanguage } = useStore_UiLanguage();
+    const { currentUiLanguage, updateUiLanguage, pendingUiLanguage } = useStore_UiLanguage();
 
     const getUiLanguage = () => {
-        updateUiLanguage(() => new Promise(() => {}));
+        pendingUiLanguage();
         asyncStdoutToPython("/get/ui_language");
     };
 
     const setUiLanguage = (selected_ui_language) => {
-        updateUiLanguage(() => new Promise(() => {}));
+        pendingUiLanguage();
         asyncStdoutToPython("/set/ui_language", selected_ui_language);
     };
 

src-ui/logics/main/useLanguageSettings.js

@@ -3,37 +3,61 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useLanguageSettings = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableMultiTranslation, updateEnableMultiTranslation } = useStore_EnableMultiTranslation();
+    const {
-    const { currentSelectedYourLanguages, updateSelectedYourLanguages } = useStore_SelectedYourLanguages();
+        currentEnableMultiTranslation,
-    const { currentSelectedTargetLanguages, updateSelectedTargetLanguages } = useStore_SelectedTargetLanguages();
+        updateEnableMultiTranslation,
-    const { currentSelectedPresetTabNumber, updateSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
+        pendingEnableMultiTranslation,
-    const { currentTranslationEngines, updateTranslationEngines } = useStore_TranslationEngines();
+    } = useStore_EnableMultiTranslation();
-    const { currentSelectedTranslationEngines, updateSelectedTranslationEngines } = useStore_SelectedTranslationEngines();
+    const {
+        currentSelectedYourLanguages,
+        updateSelectedYourLanguages,
+        pendingSelectedYourLanguages,
+    } = useStore_SelectedYourLanguages();
+    const {
+        currentSelectedTargetLanguages,
+        updateSelectedTargetLanguages,
+        pendingSelectedTargetLanguages,
+    } = useStore_SelectedTargetLanguages();
+    const {
+        currentSelectedPresetTabNumber,
+        updateSelectedPresetTabNumber,
+        pendingSelectedPresetTabNumber,
+    } = useStore_SelectedPresetTabNumber();
+    const {
+        currentTranslationEngines,
+        updateTranslationEngines,
+        pendingTranslationEngines,
+    } = useStore_TranslationEngines();
+    const {
+        currentSelectedTranslationEngines,
+        updateSelectedTranslationEngines,
+        pendingSelectedTranslationEngines,
+    } = useStore_SelectedTranslationEngines();
 
     const getEnableMultiTranslation = () => {
-        updateEnableMultiTranslation(() => new Promise(() => {}));
+        pendingEnableMultiTranslation();
         asyncStdoutToPython("/get/multi_language_translation");
     };
 
     const getSelectedPresetTabNumber = () => {
-        updateSelectedPresetTabNumber(() => new Promise(() => {}));
+        pendingSelectedPresetTabNumber();
         asyncStdoutToPython("/get/selected_tab_no");
     };
 
     const setSelectedPresetTabNumber = (preset_number) => {
-        updateSelectedPresetTabNumber(() => new Promise(() => {}));
+        pendingSelectedPresetTabNumber();
 
         asyncStdoutToPython("/set/selected_tab_no", preset_number);
     };
 
 
     const getSelectedYourLanguages = () => {
-        updateSelectedYourLanguages(() => new Promise(() => {}));
+        pendingSelectedPresetTabNumber();
         asyncStdoutToPython("/get/selected_your_languages");
     };
 
     const setSelectedYourLanguages = (selected_language_data) => {
-        // updateSelectedYourLanguages(() => new Promise(() => {}));
+        pendingSelectedYourLanguages();
         const send_obj = {
             ...currentSelectedYourLanguages.data,
             [currentSelectedPresetTabNumber.data]: {
@@ -48,12 +72,12 @@ export const useLanguageSettings = () => {
 
 
     const getSelectedTargetLanguages = () => {
-        updateSelectedTargetLanguages(() => new Promise(() => {}));
+        pendingSelectedTargetLanguages();
         asyncStdoutToPython("/get/selected_target_languages");
     };
 
     const setSelectedTargetLanguages = (selected_language_data) => {
-        // updateSelectedTargetLanguages(() => new Promise(() => {}));
+        pendingSelectedTargetLanguages();
         let send_obj = currentSelectedTargetLanguages.data;
 
         send_obj[currentSelectedPresetTabNumber.data].primary.language = selected_language_data.language,
@@ -64,21 +88,19 @@ export const useLanguageSettings = () => {
 
 
     const getTranslationEngines = () => {
-        updateTranslationEngines(() => new Promise(() => {}));
+        pendingTranslationEngines();
         asyncStdoutToPython("/get/list_translation_engines");
     };
 
     const getSelectedTranslationEngines = () => {
-        updateSelectedTranslationEngines(() => new Promise(() => {}));
+        pendingSelectedTranslationEngines();
         asyncStdoutToPython("/get/selected_translator_engines");
     };
 
     const setSelectedTranslationEngines = (selected_translator) => {
-        // updateSelectedTranslationEngines(() => new Promise(() => {}));
+        pendingSelectedTranslationEngines();
-        let send_obj = currentSelectedTranslationEngines;
+        let send_obj = currentSelectedTranslationEngines.data;
-
         send_obj[currentSelectedPresetTabNumber.data] = selected_translator;
-
         asyncStdoutToPython("/set/selected_translator_engines", send_obj);
     };
 

src-ui/logics/main/useMainFunction.js

@@ -13,17 +13,17 @@ export const useMainFunction = () => {
     const {
         currentTranslationStatus,
         updateTranslationStatus,
-        asyncUpdateTranslationStatus,
+        pendingTranslationStatus,
     } = useStore_TranslationStatus();
     const {
         currentTranscriptionSendStatus,
         updateTranscriptionSendStatus,
-        asyncUpdateTranscriptionSendStatus,
+        pendingTranscriptionSendStatus,
     } = useStore_TranscriptionSendStatus();
     const {
         currentTranscriptionReceiveStatus,
         updateTranscriptionReceiveStatus,
-        asyncUpdateTranscriptionReceiveStatus,
+        pendingTranscriptionReceiveStatus,
     } = useStore_TranscriptionReceiveStatus();
     const {
         currentForegroundStatus,
@@ -32,9 +32,8 @@ export const useMainFunction = () => {
 
     const { asyncStdoutToPython } = useStdoutToPython();
 
-    const asyncPending = () => new Promise(() => {});
     const toggleTranslation = () => {
-        asyncUpdateTranslationStatus(asyncPending);
+        pendingTranslationStatus();
         if (currentTranslationStatus.data) {
             asyncStdoutToPython("/set/disable_translation");
         } else {
@@ -43,7 +42,7 @@ export const useMainFunction = () => {
     };
 
     const toggleTranscriptionSend = () => {
-        asyncUpdateTranscriptionSendStatus(asyncPending);
+        pendingTranscriptionSendStatus();
         if (currentTranscriptionSendStatus.data) {
             asyncStdoutToPython("/set/disable_transcription_send");
         } else {
@@ -52,7 +51,7 @@ export const useMainFunction = () => {
     };
 
     const toggleTranscriptionReceive = () => {
-        asyncUpdateTranscriptionReceiveStatus(asyncPending);
+        pendingTranscriptionReceiveStatus();
         if (currentTranscriptionReceiveStatus.data) {
             asyncStdoutToPython("/set/disable_transcription_receive");
         } else {

src-ui/store.js

@@ -17,8 +17,11 @@ export const store = {
 };
 
 const generatePropertyNames = (base_ame) => ({
+    error: `error${base_ame}`,
+    pending: `pending${base_ame}`,
     current: `current${base_ame}`,
     update: `update${base_ame}`,
+    updatePart: `updatePart${base_ame}`,
     async_update: `asyncUpdate${base_ame}`,
     add: `add${base_ame}`,
     async_add: `asyncAdd${base_ame}`,
@@ -94,64 +97,136 @@ const createAsyncAtomWithHook = (initialValue, base_ame) => {
     return { atomInstance, useHook };
 };
 
-export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
 
-export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
+const createAtomWithHook_WIP = (initialValue, base_ame, options) => {
-export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
+    const property_names = generatePropertyNames(base_ame);
-export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
+    const atomInstance = atom({
-export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAsyncAtomWithHook(false, "ForegroundStatus");
+        state: (options?.is_state_ok) ? "ok" : "pending",
+        data: initialValue,
+    });
 
-export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
+    const useHook = () => {
-export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
+        const currentAtom = useAtomValue(atomInstance);
+        const setAtom = useSetAtom(atomInstance);
 
-export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
+        const pendingAtom = () => {
+            setAtom((old_value) => {
+                let new_value = {
+                    state: "pending",
+                    data: old_value.data,
+                };
+                return new_value;
+            });
+        };
+
+        const updateAtom = (payload) => {
+            setAtom((currentValue) => {
+                if (typeof payload === "function") {
+                    const updated_data = payload(currentValue);
+                    return {
+                        state: "ok",
+                        data: updated_data,
+                    };
+                } else {
+                    return {
+                        state: "ok",
+                        data: payload,
+                    };
+                }
+            });
+        };
+
+        const errorAtom = () => {
+            setAtom((old_value) => {
+                let new_value = {
+                    state: "error",
+                    data: old_value.data,
+                };
+                return new_value;
+            });
+        };
+
+        const addAtom = (value) => {
+            setAtom((old_value) => {
+                return {
+                    state: "ok",
+                    data: [...old_value.data, value],
+                };
+            });
+        };
+
+        return {
+            [property_names.error]: errorAtom,
+            [property_names.pending]: pendingAtom,
+            [property_names.current]: currentAtom,
+            [property_names.update]: updateAtom,
+            [property_names.add]: addAtom,
+        };
+    };
+
+    return { atomInstance, useHook };
+};
+
+
+
+export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook_WIP("-", "SoftwareVersion");
+
+export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook_WIP(false, "TranslationStatus", {is_state_ok: true});
+export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAtomWithHook_WIP(false, "TranscriptionSendStatus", {is_state_ok: true});
+export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAtomWithHook_WIP(false, "TranscriptionReceiveStatus", {is_state_ok: true});
+export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook_WIP(false, "ForegroundStatus", {is_state_ok: true});
+
+export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook_WIP(generateTestData(20), "MessageLogs");
+export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook_WIP(false, "IsMainPageCompactMode");
+
+export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook_WIP(
     { your_language: false, target_language: false },
     "IsOpenedLanguageSelector"
 );
-export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
+export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook_WIP([], "SelectableLanguageList");
 
-export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAsyncAtomWithHook("", "SelectedPresetTabNumber");
+export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook_WIP("", "SelectedPresetTabNumber");
-export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAsyncAtomWithHook(false, "EnableMultiTranslation");
+export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook_WIP(false, "EnableMultiTranslation");
-export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAsyncAtomWithHook({}, "SelectedYourLanguages");
+export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook_WIP({}, "SelectedYourLanguages");
-export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAsyncAtomWithHook({}, "SelectedTargetLanguages");
+export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook_WIP({}, "SelectedTargetLanguages");
 
 
-export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAsyncAtomWithHook(translator_status, "TranslationEngines");
+export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAtomWithHook_WIP(translator_status, "TranslationEngines");
-export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook({}, "SelectedTranslationEngines");
+export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook_WIP({}, "SelectedTranslationEngines");
 
 
-export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
+export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook_WIP(false, "IsOpenedConfigPage");
-export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
+export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook_WIP("device", "SelectedConfigTabId");
-export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
+export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook_WIP("", "IsOpenedDropdownMenu");
 
 
 // Config Page
-export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAsyncAtomWithHook(true, "EnableAutoMicSelect");
+export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook_WIP(true, "EnableAutoMicSelect");
-export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAsyncAtomWithHook(true, "EnableAutoSpeakerSelect");
+export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook_WIP(true, "EnableAutoSpeakerSelect");
 
-export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAsyncAtomWithHook({}, "MicHostList");
+export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAtomWithHook_WIP({}, "MicHostList");
-export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
+export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicHost");
-export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
+export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAtomWithHook_WIP({}, "MicDeviceList");
-export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
+export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicDevice");
 
-export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
+export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAtomWithHook_WIP({}, "SpeakerDeviceList");
-export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
+export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedSpeakerDevice");
 
-export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAsyncAtomWithHook(0, "MicVolume");
+export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAtomWithHook_WIP(0, "MicVolume");
-export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
+export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAtomWithHook_WIP(0, "SpeakerVolume");
 
-export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAsyncAtomWithHook(false, "MicThresholdCheckStatus");
+export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAtomWithHook_WIP(false, "MicThresholdCheckStatus", {is_state_ok: true});
-export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAsyncAtomWithHook(false, "SpeakerThresholdCheckStatus");
+export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAtomWithHook_WIP(false, "SpeakerThresholdCheckStatus", {is_state_ok: true});
 
-export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold");
+export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook_WIP(0, "MicThreshold");
-export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
+export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook_WIP(0, "SpeakerThreshold");
 
-export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticMicThreshold");
+export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticMicThreshold");
-export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticSpeakerThreshold");
+export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticSpeakerThreshold");
 
 
 // Appearance
-export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAsyncAtomWithHook("en", "UiLanguage");
+export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook_WIP("en", "UiLanguage");
 
 
 
@@ -181,16 +256,16 @@ export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useStore_
     is_message_first: true,
 }, "ReceivedMessageFormatWithT");
 
-export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
+export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook_WIP(false, "IsOpenedWordFilterList");
-export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
+export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook_WIP(word_filter_list, "WordFilterList");
 
 
 // Others
-export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
+export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook_WIP(true, "EnableAutoClearMessageBox");
-export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook_WIP("show", "SendMessageButtonType");
 
 
-export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
+export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook_WIP(false, "IsOpenedTranslatorSelector");
 
-export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
+export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook_WIP(0, "VrctPosterIndex");
-export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
+export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook_WIP(0, "PosterShowcaseWorldPageIndex");