From 9be95bfe4e74367cec88f545d7290474c052c728 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 | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
index adce10f170..475c991f02 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 [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>