refactor onRenderingStart

packages/app/src/components/ReactMarkdownComponents/DrawioViewerWithEditButton.tsx

@@ -18,7 +18,7 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
   const { data: isSharedUser } = useIsSharedUser();
   const { open: openDrawioModal } = useDrawioModal();
 
-  const [isMounted, setMounted] = useState(false);
+  const [isRendered, setRendered] = useState(false);
   const [mxfile, setMxfile] = useState('');
 
   const editButtonClickHandler = useCallback(() => {
@@ -26,18 +26,18 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
   }, [mxfile, openDrawioModal]);
 
   const renderingStartHandler = useCallback(() => {
-    setMounted(false);
+    setRendered(false);
   }, []);
 
   const renderingUpdatedHandler = useCallback((mxfile: string | null) => {
-    setMounted(mxfile != null);
+    setRendered(mxfile != null);
 
     if (mxfile != null) {
       setMxfile(mxfile);
     }
   }, []);
 
-  const showEditButton = isMounted && !isGuestUser && !isSharedUser;
+  const showEditButton = isRendered && !isGuestUser && !isSharedUser;
 
   return (
     <div className={`drawio-viewer-with-edit-button ${styles['drawio-viewer-with-edit-button']}`}>

packages/remark-drawio-plugin/src/components/DrawioViewer.tsx

@@ -38,8 +38,6 @@ export const DrawioViewer = React.memo((props: DrawioViewerProps): JSX.Element =
   const [error, setError] = useState<Error>();
 
   const renderDrawio = useCallback(() => {
-    onRenderingStart?.();
-
     if (drawioContainerRef.current == null) {
       return;
     }
@@ -68,7 +66,7 @@ export const DrawioViewer = React.memo((props: DrawioViewerProps): JSX.Element =
         }
       }
     }
-  }, [onRenderingStart]);
+  }, []);
 
   const renderDrawioWithDebounce = useMemo(() => debounce(200, renderDrawio), [renderDrawio]);
 
@@ -96,9 +94,10 @@ export const DrawioViewer = React.memo((props: DrawioViewerProps): JSX.Element =
 
   useEffect(() => {
     if (mxgraphHtml.length > 0) {
+      onRenderingStart?.();
       renderDrawioWithDebounce();
     }
-  }, [mxgraphHtml, renderDrawioWithDebounce]);
+  }, [mxgraphHtml, onRenderingStart, renderDrawioWithDebounce]);
 
   useEffect(() => {
     if (error != null) {