Material UI Grid item pushed upward due to image loading
When I am using the Material UI grid system with a project I am doing using create-react-app. I have two grid items that are adjacent to each other. That look like so:
This is exactly what I want. For some reason; however, when the page loads for a split second the text on the right side gets pushed upward and flashes unstyled like so:
I suspect it is because the image hasn’t fully loaded, so the text sits higher up until the image loads. Any advice on how to prevent this or suggestions would be greatly appreciated!!
here is a code sandbox to recreate https://codesandbox.io/s/nifty-jang-kbbty?file=/src/pages/Home.js
if you go from the home page to /portfolio when the code sandbox is in full screen, you will see the flash of unstyled content i am talking about.
<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> 
In my experience, I usually wrap images in a wrapper has fixed ratio (usually golden ratio for me) to prevent this behavior. This is because, as long as image has not been loaded, the image container (in your case is Grid component) has zero height.
If you use fixed ratio wrapper approach, the image wrapper always have a height. That’s it. You can read more about that technique here: https://css-tricks.com/aspect-ratio-boxes/
