DataGrid scrolling issue

[truexackep]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

dfhdfhdfh.mp4

Current behavior 😯

There are delays when scrolling
Im use

 rowBuffer={2}
 rowThreshold={2}

Expected behavior 🤔

No response

Context 🔦

const RenderSum = (props) => {
    const amount = props.row[props.field]
    let [pinnedRows, setPinnedRows] = useState([])
    return (
        <>
            {(() => {
                if (props.row.id < 0 || props.row.id == undefined) {
                    return <Skeleton sx={{width: '100%'}}/>
                } else {
                    // console.log(props.row.id)
                    // console.log('wtf?')
                    if (props.field == '3_1') {
                        return <Tooltip title={formatMoney(amount) + " $"}><Typography className={props.color} sx={{
                            fontWeight: '500',
                            fontSize: '14px',

                        }}>{formatMoney(amount) + " $"}</Typography></Tooltip>
                    }
                    if (props.field == '3_4') {
                        return <Tooltip title={amount + " %"}>
                            <Typography className={props.color}
                                        sx={{fontWeight: '500', fontSize: '14px'}}>{amount + " %"}</Typography>
                        </Tooltip>
                    } else if (props.field == '1_1') {
                        return <Box sx={{display: 'flex', alignItems: 'center'}}>
                            <Tooltip title={formatMoney(amount) + " $"}><Typography className={props.color} sx={{
                                fontWeight: '400',
                                fontSize: '14px'
                            }}>{formatMoney(amount) + " $"}</Typography></Tooltip>
                            <IconButton aria-label="delete" size="small">
                                <Tooltip title={'Пендинг - ' + formatMoney(props.row.hold) + " $"}>
                                    <InfoOutlinedIcon fontSize="inherit"/>
                                </Tooltip>
                            </IconButton>
                        </Box>
                    } else if (props.field !== '3_1' && props.field !== '3_2' && props.field !== '3_3' && props.field !== '3_4') {
                        return <Tooltip title={formatMoney(amount) + " $"}><Typography className={props.color} sx={{
                            fontWeight: '400',
                            fontSize: '14px'
                        }}>{formatMoney(amount) + " $"}</Typography></Tooltip>
                    } else {
                        return <Tooltip title={formatMoney(amount) + " $"}><Typography className={props.color} sx={{
                            fontWeight: '500',
                            fontSize: '14px'
                        }}>{formatMoney(amount) + " $"}</Typography></Tooltip>
                    }

                }
            })()}
        </>
    );
};
const RenderWho = (props) => {
    return (
        <Box sx={{pt: 2, pb: 3, px: 4, paddingLeft: '0px !important',}}>
            <Box sx={{display: 'flex', paddingLeft: '0px !important', alignItems: 'center'}}>
                {props.row.id > 0 ? <>
                    <Avatar alt={props.row?.who?.name} src={props.row?.who?.photo}
                            sx={{
                                width: '32px',
                                height: '32px',
                                bgcolor: 'rgb(60, 50, 96)',
                                color: 'rgb(145, 85, 253)'
                            }}/>
                    <Box sx={{display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between',}}>

                    <Box sx={{
                        display: 'flex',
                        paddingLeft: '0px !important',
                        marginLeft: 3,
                        alignItems: 'flex-start',
                        flexDirection: 'column'
                    }}>
                        <Typography
                            sx={props.row.user.status == 0 ? {color: 'red'} : {}}>{props.row.user.name}</Typography>
                        <Typography variant='body2' sx={{fontSize: '0.8rem', color: 'text.disabled'}}>
                            {props.row.user.telegram}
                        </Typography>
                    </Box>
                        <Box>

                            <IconButton
                                size="small"
                                tabIndex={-1}
                                disabled={!hasDetail}
                                aria-label={isExpanded ? 'Close' : 'Open'}
                            >
                                <ExpandMoreOutlinedIcon
                                    sx={{
                                        transform: `rotateZ(${isExpanded ? 180 : 0}deg)`,
                                        transition: (theme) =>
                                            theme.transitions.create('transform', {
                                                duration: theme.transitions.duration.shortest,
                                            }),
                                    }}
                                    fontSize="inherit"
                                />
                            </IconButton>
                        </Box>

                    </Box>
                </> : <> <Skeleton variant="circular" width={32} height={32}/>
                    <Box sx={{
                        display: 'flex',
                        paddingLeft: '0px !important',
                        marginLeft: 3,
                        alignItems: 'flex-start',
                        flexDirection: 'column'
                    }}>
                        <Typography><Skeleton sx={{width: '100px'}}></Skeleton></Typography>
                        <Typography variant='body2'>
                            <Skeleton sx={{width: '100px'}}></Skeleton>
                        </Typography>
                    </Box></>}
            </Box>
        </Box>
    );
};

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

No response

[m4theushw]

Could you share a CodeSandbox will all columns? I want to test if #7846 also solves this issue.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.