From d87151e83744d81fcd446bb7c7b0d6579cc9497a Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 3 Dec 2024 15:58:47 +0100
Subject: [PATCH] Delay initial mount

---
 src/components/sidebar/Sidebar/index.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
index adce10f170..002a40bbe2 100644
--- a/src/components/sidebar/Sidebar/index.tsx
+++ b/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 [modalProps, setModalProps] = useState({ keepMounted: 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(() => {
+      setModalProps({ keepMounted: true })
+    }, 600)
+  }, [])
+
   return (
     <div data-testid="sidebar-container" className={css.container}>
       <div className={css.scroll}>
@@ -58,13 +66,7 @@ const Sidebar = (): ReactElement => {
 
         <IndexingStatus />
       </div>
-      <Drawer
-        variant="temporary"
-        anchor="left"
-        open={isDrawerOpen}
-        onClose={onDrawerToggle}
-        ModalProps={{ keepMounted: true }}
-      >
+      <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle} ModalProps={modalProps}>
         <div className={css.drawer}>
           <MyAccounts onLinkClick={closeDrawer} isSidebar></MyAccounts>
         </div>