Use useLayoutEffect

enso-org · May 14, 2024 · 013a769 · 013a769
1 parent 034517e
commit 013a769
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 5 deletions.
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
@@ -30,7 +30,7 @@ export default function InfoMenu(props: InfoMenuProps) {
   const { getText } = textProvider.useText()
   const [initialized, setInitialized] = React.useState(false)
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     // Change the CSS from the initial state to the final state after the first render.
     // This ensures that the CSS transition triggers.
     setInitialized(true)

diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
@@ -49,10 +49,8 @@ export default function UserMenu(props: UserMenuProps) {
   const { getText } = textProvider.useText()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
 
-  React.useEffect(() => {
-    requestAnimationFrame(() => {
-      setInitialized(true)
-    })
+  React.useLayoutEffect(() => {
+    setInitialized(true)
   }, [])
 
   const aboutThisAppMenuEntry = (