window.requestAnimationFrame

liam-hq · Dec 24, 2024 · 6b72f6a · 6b72f6a
1 parent c6bce45
commit 6b72f6a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContentContext.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContentContext.tsx
@@ -9,11 +9,13 @@ import {
 type ERDContentContextState = {
   loading: boolean
   initializeComplete: boolean
+  foo: boolean
 }
 
 type ERDContentContextActions = {
   setLoading: (loading: boolean) => void
   setInitializeComplete: (initializeComplete: boolean) => void
+  setFoo: (foo: boolean) => void
 }
 
 type ERDContentConextValue = {
@@ -25,10 +27,12 @@ const ERDContentContext = createContext<ERDContentConextValue>({
   state: {
     loading: true,
     initializeComplete: false,
+    foo: false,
   },
   actions: {
     setLoading: () => {},
     setInitializeComplete: () => {},
+    setFoo: () => {},
   },
 })
 
@@ -37,12 +41,13 @@ export const useERDContentContext = () => useContext(ERDContentContext)
 export const ERDContentProvider: FC<PropsWithChildren> = ({ children }) => {
   const [loading, setLoading] = useState(true)
   const [initializeComplete, setInitializeComplete] = useState(false)
+  const [foo, setFoo] = useState(false)
 
   return (
     <ERDContentContext.Provider
       value={{
-        state: { loading, initializeComplete },
-        actions: { setLoading, setInitializeComplete },
+        state: { loading, initializeComplete, foo },
+        actions: { setLoading, setInitializeComplete, setFoo },
       }}
     >
       {children}

diff --git a/.../erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.tsx b/.../erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/Comment/Comment.tsx
@@ -9,7 +9,7 @@ type Props = {
 export const Comment: FC<Props> = ({ comment }) => {
   return (
     <DrawerDescription className={styles.wrapper}>
-      <p className={styles.text}>{comment}</p>
+      <span className={styles.text}>{comment}</span>
     </DrawerDescription>
   )
 }
diff --git a/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts b/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts
@@ -39,11 +39,11 @@ export const useAutoLayout = () => {
       })
 
       setNodes([...hiddenNodes, ...newNodes])
-      setTimeout(() => {
+      window.requestAnimationFrame(() => {
         fitView(fitViewOptions)
         setLoading(false)
         setInitializeComplete(true)
-      }, 10)
+      })
     },
     [setNodes, fitView, setLoading, setInitializeComplete],
   )

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts
@@ -38,6 +38,7 @@ export const useInitialAutoLayout = (nodes: Node[]) => {
 
   const {
     state: { initializeComplete },
+    actions: { setFoo },
   } = useERDContentContext()
   const { handleLayout } = useAutoLayout()
 
@@ -65,9 +66,17 @@ export const useInitialAutoLayout = (nodes: Node[]) => {
 
       if (tableNodesInitialized) {
         handleLayout(updatedNodes, updatedEdges, fitViewOptions)
+        setFoo(true) // make effect
       }
     }
 
     initialize()
-  }, [tableNodesInitialized, initializeComplete, handleLayout, nodes, getEdges])
+  }, [
+    tableNodesInitialized,
+    initializeComplete,
+    handleLayout,
+    nodes,
+    getEdges,
+    setFoo,
+  ])
 }