[Update] Config Page: Translation Tab: DeeplAuthKey. Add disable and loading ui when it's pending status.

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React, { useRef, forwardRef, useImperativeHandle } from "react";
 import styles from "./_Entry.module.scss";
 
@@ -9,6 +10,9 @@ const _Entry = forwardRef((props, ref) => {
             inputRef.current.focus();
         }
     }));
+    const input_class_names = clsx(styles.entry_input_area, {
+        [styles.is_disabled]: props.is_disabled
+    });
 
     return (
         <div className={styles.entry_container}>
@@ -18,7 +22,7 @@ const _Entry = forwardRef((props, ref) => {
             >
                 <input
                     ref={inputRef}
-                    className={styles.entry_input_area}
+                    className={input_class_names}
                     value={props.ui_variable === null ? "" : props.ui_variable}
                     onChange={(e) => props.onChange(e)}
                 />

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss

@@ -16,4 +16,9 @@
     height: 100%;
     font-size: 1.4rem;
     resize: none;
+    color: var(--dark_basic_text_color);
+    &.is_disabled {
+        color: var(--dark_500_color);
+        pointer-events: none;
+    }
 }

src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx

@@ -1,6 +1,7 @@
 import styles from "./DeeplAuthKey.module.scss";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
+import CircularProgress from "@mui/material/CircularProgress";
 import ExternalLink from "@images/external_link.svg?react";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState, useRef } from "react";
@@ -29,11 +30,22 @@ export const DeeplAuthKey = (props) => {
         }
     }, [props.variable]);
 
+    const is_disabled = props.state === "pending";
+
+    const save_button_class_names = clsx(styles.save_button, {
+        [styles.is_disabled]: is_disabled
+    });
+
     return (
         <div className={styles.container}>
             <div className={styles.entry_section_wrapper}>
-                <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable}/>
-                <button className={styles.save_button} onClick={saveAuthKey}>Save</button>
+                <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/>
+                <button className={save_button_class_names} onClick={saveAuthKey}>
+                    {is_disabled
+                    ? <CircularProgress size="1.4rem" sx={{ color: "var(--dark_basic_text_color)" }}/>
+                    : <p className={styles.save_button_label}>Save</p>
+                }
+                </button>
                 {is_editable
                 ? null
                 :

src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss

@@ -44,17 +44,25 @@
 .save_button {
     padding: 0.8rem 1.2rem;
     background-color: var(--primary_600_color);
-    color: var(--dark_basic_text_color);
-    font-size: 1.4rem;
     border-radius: 0.4rem;
     text-align: center;
     flex-shrink: 0;
+    min-width: 5.4rem;
     &:hover {
         background-color: var(--primary_500_color);
     }
     &:active {
         background-color: var(--primary_700_color);
     }
+    &.is_disabled {
+        pointer-events: none;
+        background-color: var(--primary_800_color);
+    }
+}
+
+.save_button_label {
+    color: var(--dark_basic_text_color);
+    font-size: 1.4rem;
 }
 
 .open_webpage_button_wrapper {

src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss

@@ -1,4 +1,5 @@
 .container {
+
 }
 
 .entry_wrapper {

src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -124,6 +124,7 @@ const DeeplAuthKey_Box = () => {
                     {translator: t("main_page.translator")}
                 )}
                 variable={input_value}
+                state={currentDeepLAuthKey.state}
                 onChangeFunction={onChangeFunction}
                 saveFunction={saveFunction}
             />