Drawer MUI component persistent animation is super slow (sometimes) || React with MUI - reactjs

Question

I'm building this app, and, as you can see, we have a left drawer and a main component in the right direction.
And when I close that drawer, the main component will move a little bit in order to occupy the rest of the space.
But, when there's too much data in the table, the animation is going to be super slow and it doesn't look nice.
This is the code, here, we have that left drawer and the main component
{/* Side panel */}
<LeftDrawer />
{/* Main content */}
<SinAsignarHero />
This is only the left drawer, that has an open prop that will receive a boolean from a redux reducer
<Drawer
sx={{
width: 260,
flexShrink: 0,
background: '#fafafa',
'& .MuiDrawer-paper': {
width: 260,
background: '#fafafa',
border: '0px',
boxShadow: '0px 8px 7px #0000003D',
boxSizing: 'border-box',
top: 'auto',
zIndex: 1,
},
}}
open={isOpen}
variant="persistent"
anchor="left"
>
{appOptions &&
appOptions.menus.map(({ id, nombre, sub_menu }) => {
return (
<Fragment key={id}>
<AppOptions nombre={nombre} sub_menu={sub_menu && sub_menu} />
</Fragment>
);
})}
</Drawer>
And the main component that will execute the animation to occupy the whole space with the same boolean from redux
const MainContent = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
open?: boolean;
}>(({ theme, open }) => ({
background: '#fafafa',
height: '90.7vh',
overflowX: 'hidden',
flexGrow: 1,
padding: '40px 53px 0px 53px',
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: `-260px`,
...(open && {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
}),
}));
return (
<MainContent open={isDrawerOpen}>
<SinAsignarTitle setCount={setCount} setHasMore={setHasMore} />
<TableContainer component={Paper} sx={{ maxHeight: '73vh', borderRadius: '5px' }}>
{scrollData.length ? (
<>
<InfiniteScroll
dataLength={scrollData.length}
next={getMoreData}
hasMore={hasMore}
loader={<div></div>}
scrollableTarget="TableContainer"
>
<TableContainer
component={Paper}
sx={{ maxHeight: '73vh', borderRadius: '5px' }}
id="TableContainer"
>
<Table stickyHeader sx={{ minWidth: 800 }}>
{/* Table header */}
<SinAsignarHead setCount={setCount} setHasMore={setHasMore} />
{/* Hero content */}
<SinAsignarContent recogidas={scrollData} />
</Table>
</TableContainer>
</InfiniteScroll>
</>
) : (
<NotFound />
)}
</TableContainer>
</MainContent>
So, when there isn't that much data in the table, it is not that slow, but, I want the animation to be fast always.
This is pretty much what I would love to accomplish
https://mui.com/components/drawers/#persistent-drawer
If you go to the sandbox of that example, and you add too much text, the animation is still fine, I don't know if maybe there are too many things going on when there's too much data so it's harder for my left drawer and main component to make the animations as fast as possible. Is there something I can do in order to fix this ?¿

Answer 1

Try virtualized table.
Virtualization helps with performance issues.
https://mui.com/components/tables/#virtualized-table