While working on a project using the Material UI grid system with create-react-app, I encountered an issue with two adjacent grid items. Initially, they display as intended:
https://i.sstatic.net/i9jeP.png
However, upon loading the page, there is a brief moment where the text on the right side shifts upward and appears unstyled:
https://i.sstatic.net/VOKZ4.pngI believe this behavior occurs because the image hasn't fully loaded yet, causing the text to move up temporarily. Any suggestions on how to prevent this flash of unstyled content would be greatly appreciated!
For reference, here is a code sandbox to recreate the issue. When navigating from the home page to /portfolio while in full screen mode, you will see the flash of unstyled content that I am describing.
<Grid container justify='center' alignItems='center'>
<Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
<img src={JobTracker} alt='jobtracker' style={{ width: '100%' }} />
</Grid>
<Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
<Container maxWidth='xs'>
<Typography variant='h3' style={{ textAlign: 'center' }}>
JobTracker
</Typography>
<br />
<Typography variant='body2'>
A platform that allows recent graduates from Wyncode Academy to track job applications. Technologies used: ReactJS, NodeJS, Google Cloud Functions, and Google Firestore.
</Typography>
</Container>
</Grid>
</Grid>