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

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 ?¿

This is due to many rows created in the table with huge data. your browser also has limitation on how much memory each page can take, hence your website is slow for huge data. Solution for this is to use pagination and load data what you can see, so that UI components are created only for data that can be seen. There are many npm packages which can achieve this - codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/… itnext.io/handling-large-lists-and-tables-in-react-238397854625 — Santosh Karanam
– Santosh Karanam, Commented Feb 14, 2022 at 13:53
That actually makes sense, i'll try to load as less data as possible. Actually, when i have only a litle bit data, it works great, and i'm using react-infinite-scroll-component as well, so i don't show that much data. — Diego Davincci
– Diego Davincci, Commented Feb 14, 2022 at 14:07
yes, if you set dataLength to number of rows visible then should work. You can change this number based on window height also or use pagination / "next" button allow user to load more. — Santosh Karanam
– Santosh Karanam, Commented Feb 14, 2022 at 16:40

小聪聪到此一游 · Accepted Answer · 2022-02-21 08:29:21Z

3

Try virtualized table.

Virtualization helps with performance issues.

https://mui.com/components/tables/#virtualized-table

answered Feb 21, 2022 at 8:29

小聪聪到此一游

1,2946 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Annonymous · Accepted Answer · 2025-01-14 09:44:55Z

0

Just wrap the table inside a Box and give property flexgrow:1

 <Box sx={{ flexGrow: 1, m: 10 }}>
      <SampleTable />
    </Box>

answered Jan 14 at 9:44

Annonymous

113 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related