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

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 {