[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 {