IO-3464 Document Edit

Signed-off-by: Allan Carr <allan@imexsystems.ca>

client/src/components/document-editor/document-editor.component.jsx

@@ -84,45 +84,50 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
   }, [triggerUpload, imageLoaded]);
 
   useEffect(() => {
-    // When the document changes, fetch the image via axios so auth and base URL are applied
-    let isCancelled = false;
+    if (!document?.id) return;
+    const controller = new AbortController();
 
     const loadImage = async () => {
-      if (!document || !document.id) return;
-
       setImageLoaded(false);
       setImageLoading(true);
-
       try {
         const response = await axios.post(
           "/media/imgproxy/original",
           { documentId: document.id },
-          { responseType: "blob" }
+          {
+            responseType: "blob",
+            signal: controller.signal
+          }
         );
-
-        if (isCancelled) return;
-
         const blobUrl = URL.createObjectURL(response.data);
         setImageUrl((prevUrl) => {
           if (prevUrl) URL.revokeObjectURL(prevUrl);
           return blobUrl;
         });
       } catch (error) {
+        if (axios.isCancel?.(error) || error.name === "CanceledError") {
+          // request was aborted — safe to ignore
+          return;
+        }
         console.error("Failed to fetch original image blob", error);
       } finally {
-        if (!isCancelled) {
-          setImageLoading(false);
-        }
+        setImageLoading(false);
       }
     };
-
     loadImage();
-
     return () => {
-      isCancelled = true;
+      controller.abort();
     };
   }, [document]);
 
+  useEffect(() => {
+    return () => {
+      if (imageUrl) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, [imageUrl]);
+
   async function b64toBlob(url) {
     const res = await fetch(url);
     return await res.blob();