[Rename] is_loading to is_pending.

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

@@ -29,7 +29,7 @@ export const DropdownMenu = (props) => {
     });
 
     const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {
-        [styles.is_loading]: (props.state === "pending") ? true : false,
+        [styles.is_pending]: (props.state === "pending") ? true : false,
         [styles.is_disabled]: props.is_disabled,
     });
 

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

@@ -17,7 +17,7 @@
     &:active {
         background-color: var(--dark_975_color);
     }
-    &.is_loading {
+    &.is_pending {
         pointer-events: none;
     }
     &.is_disabled {

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

@@ -6,11 +6,11 @@ export const Switchbox = (props) => {
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 
-    const is_loading = (props.variable.state === "pending");
+    const is_pending = (props.variable.state === "pending");
 
     const getClassNames = (base_class) => clsx(base_class, {
         [styles.is_active]: (props.variable.data === true),
-        [styles.is_loading]: is_loading,
+        [styles.is_pending]: is_pending,
         [styles.is_hovered]: is_hovered,
         [styles.is_mouse_down]: is_mouse_down,
     });
@@ -36,7 +36,7 @@ export const Switchbox = (props) => {
             >
                 <div className={getClassNames(styles.toggle_control)}>
                     <span className={getClassNames(styles.control)}></span>
-                    {is_loading && <span className={styles.loader}></span>}
+                    {is_pending && <span className={styles.loader}></span>}
                 </div>
             </div>
         </div>

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

@@ -16,7 +16,7 @@
     padding: 2rem;
     height: 100%;
     flex-shrink: 0;
-    &.is_loading {
+    &.is_pending {
         pointer-events: none;
     }
 }

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 === "pending"),
+        [styles.is_pending]: (props.isChecking.state === "pending"),
     });
 
     const toggleFunction = () => {

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

@@ -17,7 +17,7 @@
             background-color: var(--primary_550_color);
         }
     }
-    &.is_loading {
+    &.is_pending {
         background-color: var(--dark_850_color);
         pointer-events: none;
         .button_svg, .button_text {

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

@@ -79,7 +79,7 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
     const getClassNames = (baseClass) => clsx(baseClass, {
         [styles.is_compact_mode]: currentIsMainPageCompactMode.data,
         [styles.is_active]: (currentState.data === true),
-        [styles.is_loading]: (currentState.state === "pending"),
+        [styles.is_pending]: (currentState.state === "pending"),
         [styles.is_hovered]: is_hovered,
         [styles.is_mouse_down]: is_mouse_down,
     });

src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss

@@ -23,7 +23,7 @@
     &.is_compact_mode {
         padding: 1.5rem;
     }
-    &.is_loading {
+    &.is_pending {
         pointer-events: none;
     }
 }
@@ -36,23 +36,23 @@
 }
 
 $basic_label_color: var(--dark_basic_text_color);
-$loading_label_color: var(--dark_500_color);
+$pending_label_color: var(--dark_500_color);
 .switch_label {
     font-size: 1.4rem;
     color: $basic_label_color;
     &.is_compact_mode {
         display: none;
     }
-    &.is_loading {
-        color: $loading_label_color;
+    &.is_pending {
+        color: $pending_label_color;
     }
 }
 
 .switch_svg {
     width: 1.8rem;
     color: $basic_label_color;
-    &.is_loading {
-        color: $loading_label_color;
+    &.is_pending {
+        color: $pending_label_color;
     }
     &:not(.is_compact_mode) {
         width: 1.6rem;

src-ui/utils/mixins.scss

@@ -76,7 +76,7 @@ $toggle_control_size: $toggle_height - calc($toggle_gutter * 2);
             background: $toggle_control_color;
             transition: left $toggle_control_speed $toggle_control_ease;
         }
-        &.is_loading:after{
+        &.is_pending:after{
             background-color: var(--dark_600_color);
         }
         &.is_hovered {