pkgs/ui/src/components/sequence_diagram/index.tsx

@@ -55,9 +55,13 @@ const SequenceDiagram = () => {
   const dataDependency = JSON.stringify(hasData ? eventMessagesData?.data : "");
 
   useEffect(() => {
+    const currentMermaidRef = mermaidRef?.current;
+
     if (!loadingEventMessages && hasData) {
-      // check for the absence of this attribute to render the diagram
+      if (
-      if (!mermaidRef.current.getAttribute("data-processed")) {
+        currentMermaidRef &&
+        !currentMermaidRef.getAttribute("data-processed")
+      ) {
         mermaid.initialize({
           startOnLoad: false,
           securityLevel: "loose",
@@ -67,21 +71,19 @@ const SequenceDiagram = () => {
           },
         });
       }
-    }
 
-    if (mermaidRef.current) {
+      if (currentMermaidRef) {
-      mermaidRef.current.innerHTML = mermaidString;
+        currentMermaidRef.innerHTML = mermaidString;
-      mermaid.init(undefined, mermaidRef.current);
+        mermaid.init(undefined, currentMermaidRef);
+      }
     }
-
     return () => {
-      if (mermaidRef.current) {
+      if (currentMermaidRef) {
-        // By removing the 'data-processed' attribute, we ensure Mermaid will process the diagram again
+        currentMermaidRef.removeAttribute("data-processed");
-        mermaidRef.current.removeAttribute("data-processed");
+        currentMermaidRef.innerHTML = "";
-        // Reset the innerHTML to clear the diagram
-        mermaidRef.current.innerHTML = "";
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataDependency]);
 
   useEffect(() => {