feat: optimize card display

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}) {
       />
       <Card sx={{borderRadius: 2, overflow: 'hidden'}}>
         <CardActionArea component={Link} href={`/paroles/${slug}`}>
-          <CardMedia
+          <Box sx={{position: 'relative', width: '100%', aspectRatio: {xs: '1 / 1', sm: '16 / 9'}, maxHeight: {sm: 420}}}>
-            component='img'
+            {!imageLoaded && (
-            image={imageUrl}
+              <Skeleton
-            alt={titre}
+                variant='rectangular'
-            sx={{
+                animation='wave'
-              width: '100%',
+                sx={{position: 'absolute', inset: 0, width: '100%', height: '100%'}}
-              aspectRatio: {xs: '1 / 1', sm: '16 / 9'},
+              />
-              objectFit: 'cover',
+            )}
-              maxHeight: {sm: 420}
+            <CardMedia
-            }}
+              component='img'
-          />
+              image={imageUrl}
+              alt={titre}
+              fetchPriority='high'
+              onLoad={() => setImageLoaded(true)}
+              sx={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+              }}
+            />
+          </Box>
           <CardContent>
             <Typography variant='h5' component='h2' sx={{fontWeight: 'bold', mb: 0.5}}>
               {titre}