[bugfix/Refactor] Checkbox Component. Fix to disabled when it's loading(it was clickable continuously)

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

@@ -1,24 +0,0 @@
-import styles from "./Checkbox.module.scss";
-
-export const Checkbox = (props) => {
-    return (
-        <div className={styles.checkbox_container}>
-            <label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
-                {(props.state === "pending")
-                    ? <span className={styles.loader}></span>
-                    : <input
-                        type="checkbox"
-                        id={props.checkbox_id}
-                        checked={props.variable.data}
-                        onChange={props.toggleFunction}
-                    />
-                }
-                <span className={styles.cbx}>
-                    <svg viewBox="0 0 12 12">
-                        <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
-                    </svg>
-                </span>
-            </label>
-        </div>
-    );
-};

src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.module.scss

@@ -1,60 +0,0 @@
-@import "@scss_mixins";
-
-.checkbox_container {
-    // width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: end;
-    align-items: center;
-}
-
-.checkbox_wrapper {
-    display: inline-block;
-    cursor: pointer;
-    padding: 2rem;
-    position: relative;
-    &:hover {
-        & .cbx {
-            border: var(--primary_600_color) solid 0.2rem;
-        }
-    }
-}
-
-.checkbox_wrapper .cbx {
-    display: block;
-    width: 2.8rem;
-    height: 2.8rem;
-    border-radius: 0.4rem;
-    border: var(--dark_700_color) solid 0.2rem;
-    transition: all 0.15s ease;
-    padding: 0.4rem;
-}
-
-.checkbox_wrapper .cbx svg {
-    fill: none;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke: var(--dark_basic_text_color);
-    stroke-width: 0.2rem;
-    stroke-dasharray: 1.7rem;
-    stroke-dashoffset: 1.7rem;
-}
-
-.checkbox_wrapper input[type="checkbox"] {
-    display: none;
-    visibility: hidden;
-}
-
-.checkbox_wrapper input[type="checkbox"]:checked + .cbx {
-    background-color: var(--primary_600_color);
-    border: none;
-}
-
-.checkbox_wrapper input[type="checkbox"]:checked + .cbx svg {
-    stroke-dashoffset: 0;
-    transition: all 0.15s ease;
-}
-
-.loader {
-    @include loader(2rem, 0.2rem, right, -2rem);
-}

src-ui/app/config_page/setting_section/setting_box/_components/index.js

@@ -1,5 +1,4 @@
 export { ActionButton } from "./action_button/ActionButton";
-export { Checkbox } from "./checkbox/Checkbox";
 export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
 export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 export { Entry } from "./entry/Entry";

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -6,7 +6,6 @@ import {
     LabelComponent,
     DropdownMenu,
     Slider,
-    Checkbox,
     SwitchBox,
     Entry,
     RadioButton,
@@ -17,6 +16,7 @@ import {
     WordFilterListToggleComponent,
     DownloadModels,
 } from "../_components/";
+import { Checkbox } from "@common_components";
 
 const LabeledContainer = ({ children, label, desc, custom_class_name }) => (
     <div className={clsx(styles.container, custom_class_name)}>

src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -17,10 +17,10 @@ import {
 
 import {
     LabelComponent,
-    Checkbox,
     ActionButton,
     SectionLabelComponent,
 } from "../_components/";
+import { Checkbox } from "@common_components";
 
 import OpenFolderSvg from "@images/open_folder.svg?react";
 

src-ui/common_components/checkbox/Checkbox.jsx

@@ -1,20 +1,23 @@
+import { clsx } from "clsx";
 import styles from "./Checkbox.module.scss";
-
 export const Checkbox = ({
     checkboxId,
     variable,
     toggleFunction,
-    state = "idle",
     size = "2.8rem",
     color = "var(--primary_600_color)",
     borderWidth = "0.2rem",
     padding = "2rem",
 }) => {
 
+    const wrapper_class_names = clsx(styles.checkbox_wrapper, {
+        [styles.is_disabled]: variable.state === "pending",
+    });
+
     return (
         <div className={styles.checkbox_container}>
             <label
-                className={styles.checkbox_wrapper}
+                className={wrapper_class_names}
                 htmlFor={checkboxId}
                 style={{
                     "--checkbox-size": size,
@@ -23,7 +26,7 @@ export const Checkbox = ({
                     "--checkbox-padding": padding,
                 }}
             >
-                {state === "pending" ? (
+                {variable.state === "pending" ? (
                     <span className={styles.loader}></span>
                 ) : (
                     <input

src-ui/common_components/checkbox/Checkbox.module.scss

@@ -18,6 +18,12 @@
             border: var(--checkbox-color, var(--primary_600_color)) solid var(--checkbox-border-width, 0.2rem);
         }
     }
+    &.is_disabled {
+        pointer-events: none;
+        & .cbx {
+            border-color: var(--primary_800_color);
+        }
+    }
 }
 
 .checkbox_wrapper .cbx {