Почему отрисовка страницы происходит не сразу полностью, кнопка появляется с задержкой?

Question

Alexandep @Alexandep

Почему отрисовка страницы происходит не сразу полностью, кнопка появляется с задержкой?

подскажите пожалуйста, совсем недавно с Next Js знаком. При загрузке страницы, все отображается сразу, а вот кнопка появляется с задержкой.

export const useStyles = makeStyles({
    container: {
        position: 'absolute',
        left: '50%',
        transform: 'translate(-50%, 1%)',
        textAlign: 'center'
    },
    field: {
        boxShadow: '0 3px 5px 2px rgba(0,0,0, .3)',
        borderRadius: 3,
    },
    btn: {
        border: 'none',
        margin: 20,
        width: 400,
        height: 45,
        borderRadius: 6,
        textTransform: 'uppercase',
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        cursor: 'pointer',
        color: '#fff',
        backgroundSize: '200%',
        transition: '1s',
        backgroundPosition: 'right',
        '&:hover': {
            backgroundPosition: 'left'
        }
    },
    btn1: {
        backgroundImage: 'linear-gradient(45deg, #34495e, #9b59b6, #3498db)'
    }
})
export const theme = createTheme({});


export default function Payment() {
    const classes = useStyles()

    
    const handlerSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
    };
  


    return (
        <React.StrictMode>
            <CssBaseline/>

            <main>
                <ThemeProvider theme={theme}>
                    <Container component="main" maxWidth="xs">
                        <Box sx={{
                            marginTop: 6,
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                        }}>

                            <Box component="form"
                                 noValidate
                                 onSubmit={handlerSubmit}
                                 sx={{mt: 3}}>
                                <Grid container
                                      spacing={2}
                                      justifyContent="center"
                                      alignItems="center">
                                <Grid item xs={12} sm={5}>
                                    <div className={classes.container}>
                                     <b>   <Button
                                            className={`${classes.btn} ${classes.btn1}`}
                                            fullWidth
                                            variant="contained"
                                            onClick={sendPay}
                                            sx={{mt: 3, mb: 2,}}
                                        ></b>
                                            Pay
                                        </Button>
                                    </div>
                                </Grid>
                            </Box>
                            <Grid>
                            </Grid>
                        </Box>
                    </Container>
                </ThemeProvider>
            </main>
            <CssBaseline/>
        </React.StrictMode>
    )
}