Delay initial mount

src/components/sidebar/Sidebar/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, type ReactElement } from 'react'
+import { useCallback, useEffect, useState, type ReactElement } from 'react'
 import { Box, Divider, Drawer } from '@mui/material'
 import ChevronRight from '@mui/icons-material/ChevronRight'
 
@@ -14,6 +14,7 @@ import MyAccounts from '@/features/myAccounts'
 
 const Sidebar = (): ReactElement => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
+  const [keepMounted, setKeepMounted] = useState(false)
 
   const onDrawerToggle = useCallback(() => {
     setIsDrawerOpen((isOpen) => {
@@ -25,6 +26,13 @@ const Sidebar = (): ReactElement => {
 
   const closeDrawer = useCallback(() => setIsDrawerOpen(false), [])
 
+  // Mount the drawer 600ms after the page load, and keep it mounted
+  useEffect(() => {
+    setTimeout(() => {
+      setKeepMounted(true)
+    }, 600)
+  }, [])
+
   return (
     <div data-testid="sidebar-container" className={css.container}>
       <div className={css.scroll}>
@@ -63,7 +71,7 @@ const Sidebar = (): ReactElement => {
         anchor="left"
         open={isDrawerOpen}
         onClose={onDrawerToggle}
-        ModalProps={{ keepMounted: true }}
+        ModalProps={{ keepMounted }}
       >
         <div className={css.drawer}>
           <MyAccounts onLinkClick={closeDrawer} isSidebar></MyAccounts>