fix(checkbox): prevent race condition in setting ariaBusy

alirezamirian · Oct 23, 2024 · 214132c · 214132c
1 parent dee7149
commit 214132c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/packages/jui/src/Checkbox/Checkbox.cy.tsx b/packages/jui/src/Checkbox/Checkbox.cy.tsx
@@ -17,9 +17,6 @@ describe("Checkbox", () => {
     matchImageSnapshot("Checkbox-unchecked");
     cy.contains(CHECKBOX_LABEL_TEXT).click();
 
-    // svg is already loaded, so the workaround in matchImageSnapshot won't work :/ can be removed when icons loading
-    // in tests is improved in general
-    cy.wait(50);
     matchImageSnapshot("Checkbox-checked-and-focused");
   });
 

diff --git a/packages/jui/src/Icon/useSvgIcon.tsx b/packages/jui/src/Icon/useSvgIcon.tsx
@@ -16,7 +16,7 @@ export function useSvgIcon(
   const itemState = useContext(ItemStateContext);
   const selected = itemState?.isSelected || itemState?.isContainerFocused;
   useEffect(() => {
-    let unmounted = false;
+    let canceled = false;
     const fetchIcon = async () => {
       if (!path) {
         console.error("icon path is empty");
@@ -35,13 +35,13 @@ export function useSvgIcon(
           throw e;
         })
         .finally(() => {
-          if (ref?.current) {
+          if (ref?.current && !canceled) {
             ref.current.ariaBusy = "false";
           }
         });
       if (svg) {
         const element = ref?.current;
-        if (!unmounted && element) {
+        if (!canceled && element) {
           element.querySelector("svg")?.remove();
           const svgElement = document.createElement("svg");
           element.appendChild(svgElement);
@@ -53,7 +53,7 @@ export function useSvgIcon(
     };
     fetchIcon().catch(console.error);
     return () => {
-      unmounted = true;
+      canceled = true;
     };
   }, [path, selected]);
 }