diff --git a/components/akey/an-vedette.js b/components/akey/an-vedette.js index 6813d97..32120ef 100644 --- a/components/akey/an-vedette.js +++ b/components/akey/an-vedette.js @@ -1,10 +1,12 @@ 'use client' +import {useState} from 'react' import PropTypes from 'prop-types' import Card from '@mui/material/Card' import CardActionArea from '@mui/material/CardActionArea' import CardContent from '@mui/material/CardContent' import CardMedia from '@mui/material/CardMedia' +import Skeleton from '@mui/material/Skeleton' import Typography from '@mui/material/Typography' import Box from '@mui/material/Box' import Chip from '@mui/material/Chip' @@ -17,6 +19,7 @@ const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337 const noImageUrl = 'https://place-hold.it/600x600?text=Indisponible' export default function AnVedette({teks}) { + const [imageLoaded, setImageLoaded] = useState(false) const {titre, artistes, annee, couverture, slug} = teks const aliases = getAlias(artistes, teks.prioriteArtistes) const fmt = formatKuveti(couverture) @@ -32,17 +35,27 @@ export default function AnVedette({teks}) { /> - + + {!imageLoaded && ( + + )} + setImageLoaded(true)} + sx={{ + width: '100%', + height: '100%', + objectFit: 'cover', + }} + /> + {titre}