fix: OPTIC-1087: Label Config Preview not handling editor lifecycle correctly for updates (#6381)

Author: bmartel

web/apps/labelstudio/src/pages/CreateProject/Config/Preview.jsx

@@ -15,8 +15,11 @@ export const Preview = ({ config, data, error, loading, project }) => {
   const lsf = useRef(null);
   const resolvingEditor = useMemo(loadDependencies);
   const rootRef = useRef();
+  const projectRef = useRef(project);
   const api = useAPI();
 
+  projectRef.current = project;
+
   const currentTask = useMemo(() => {
     return {
       id: 1,
@@ -37,7 +40,7 @@ export const Preview = ({ config, data, error, loading, project }) => {
     // return same url if http(s)
     if (["http:", "https:"].includes(parsedUrl.protocol)) return url;
 
-    const projectId = project.id;
+    const projectId = projectRef.current.id;
 
     const fileuri = btoa(url);
 
@@ -101,18 +104,7 @@ export const Preview = ({ config, data, error, loading, project }) => {
         lsf.current = ls;
       });
     }
-
-    return () => {
-      if (lsf.current) {
-        console.info("Destroying LSF");
-        // there is can be weird error from LSF, but we can just skip it for now
-        try {
-          lsf.current.destroy();
-        } catch (e) {}
-        lsf.current = null;
-      }
-    };
-  }, [initLabelStudio, currentConfig, currentTask]);
+  }, [currentConfig, currentTask]);
 
   useEffect(() => {
     if (lsf.current?.store) {
@@ -138,6 +130,19 @@ export const Preview = ({ config, data, error, loading, project }) => {
     }
   }, [currentTask]);
 
+  useEffect(() => {
+    return () => {
+      if (lsf.current) {
+        console.info("Destroying LSF");
+        // there can be weird error from LSF, but we can just skip it for now
+        try {
+          lsf.current.destroy();
+        } catch (e) {}
+        lsf.current = null;
+      }
+    };
+  }, []);
+
   return (
     <div className={configClass.elem("preview")}>
       <h3>UI Preview</h3>