IO-3464 Document Edit

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

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

@@ -97,41 +97,45 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
   }, [triggerUpload, imageLoaded]);
 
   useEffect(() => {
-    // Load the image from imageUrl
-    let isCancelled = false;
+    if (!imageUrl) return;
+    const controller = new AbortController();
 
     const loadImage = async () => {
-      if (!imageUrl) return;
-
       setImageLoaded(false);
       setImageLoading(true);
-
       try {
-        const response = await axios.get(imageUrl, { responseType: "blob" });
-
-        if (isCancelled) return;
-
+        const response = await axios.get(imageUrl, { responseType: "blob", signal: controller.signal });
         const blobUrl = URL.createObjectURL(response.data);
         setLoadedImageUrl((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 image blob", error);
       } finally {
-        if (!isCancelled) {
+        if (!controller.signal.aborted) {
           setImageLoading(false);
         }
       }
     };
-
     loadImage();
-
     return () => {
-      isCancelled = true;
+      controller.abort();
     };
   }, [imageUrl]);
 
+  useEffect(() => {
+    return () => {
+      if (loadedImageUrl) {
+        URL.revokeObjectURL(loadedImageUrl);
+      }
+    };
+  }, [loadedImageUrl]);
+
   async function b64toBlob(url) {
     const res = await fetch(url);
     return await res.blob();