MaterialUI CardMedia Image with spinner - material-ui

Question

The following component works perfectly file. I want to show a spinner until the image gets loaded. How do I do that?
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import Image from 'material-ui-image';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Typography from '#material-ui/core/Typography';
/**
* Media is a Card, with an image / video and a caption. url of the media is hidden from the user,
* but the user can click it to open it in a new browser
*/
const useStyles = makeStyles({
card: {
margin: '0.5rem',
maxWidth: '25%'
}
});
const Media = ({ url, caption }: any) => {
const classes = useStyles();
return (
<Card className={classes.card}>
<CardActionArea>
<CardMedia component="img" alt={caption} height="140" image={url} title={caption} />
<CardContent>
<Typography variant="body2">{caption}</Typography>
</CardContent>
</CardActionArea>
</Card>
);
};
export default Media;

Answer 1

The image component should be loaded regardless of image is loaded or not. We can not show the image component on the screen by setting the height of the component to 0 and and then setting the height of the image component to desired height once the image is loaded.
Then, the tracking of if the image is loaded can be done using the state.
import React, { useState } from 'react';
// Image component with loading state
export default Image = () => {
const [hasImageLoaded, setHasImageLoaded] = useState(false);
return (
<>
<img src={src} onLoad={() => setHasImageLoaded(true)} className={`${!hasImageLoaded && height-0}`} />
{ !hasImageLoaded && <div> Loading... </div> }
</>
);
}
.height-0 {
height: 0;
}
Ps. This code can be changed according to your use. The code is done considering the general use

Answer 2

The Material-UI CardMedia component displays the image as a background image, so you won't be able to access the onLoad property available on the DOM <img> tag. You could chooses to use an <img> instead, like this:
add to you imports:
import CircularProgress from '#material-ui/core/CircularProgress';
add to your styles:
media: {
width: '100%',
height: 140,
},
progress: {
# center spinner
}
add state and onLoad handler to your component:
const [loaded, setLoaded] = React.useState(false);
function handleImageLoad() {
setLoaded(true);
}
replace your CardMedia with:
{loaded ? (
<img
className={classes.media}
src={url}
alt={caption}
onLoad={handleImageLoad}
/>
) : (
<div className={classes.progress}>
<CircularProgress color="secondary" />
</div>
)}