feat: add blur to index image

components/akey/an-vedette.js

@@ -1,29 +1,27 @@
 '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'
+import Image from 'next/image'
 import Link from 'next/link'
 
 import {getAlias} from '../../lib/utils/format'
 import {formatKuveti} from '../../lib/kuveti'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
-const noImageUrl = 'https://place-hold.it/600x600?text=Indisponible'
+
+// 1×1 gris neutre — placeholder pendant le chargement
+const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
 
 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, 'medium')
-  const imageUrl = fmt?.url ? `${IMAGE_URL}${fmt.url}` : noImageUrl
 
   return (
     <Box sx={{mb: 4}}>
@@ -36,25 +34,20 @@ export default function AnVedette({teks}) {
       <Card sx={{borderRadius: 2, overflow: 'hidden'}}>
         <CardActionArea component={Link} href={`/paroles/${slug}`}>
           <Box sx={{position: 'relative', width: '100%', aspectRatio: {xs: '1 / 1', sm: '16 / 9'}, maxHeight: {sm: 420}}}>
-            {!imageLoaded && (
+            {fmt?.url ? (
-              <Skeleton
+              <Image
-                variant='rectangular'
+                src={`${IMAGE_URL}${fmt.url}`}
-                animation='wave'
-                sx={{position: 'absolute', inset: 0, width: '100%', height: '100%'}}
-              />
-            )}
-            <CardMedia
-              component='img'
-              image={imageUrl}
                 alt={titre}
-              fetchPriority='high'
+                fill
-              onLoad={() => setImageLoaded(true)}
+                priority
-              sx={{
+                placeholder='blur'
-                width: '100%',
+                blurDataURL={BLUR_DATA_URL}
-                height: '100%',
+                sizes='(max-width: 600px) 100vw, 800px'
-                objectFit: 'cover',
+                style={{objectFit: 'cover'}}
-              }}
               />
+            ) : (
+              <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
+            )}
           </Box>
           <CardContent>
             <Typography variant='h5' component='h2' sx={{fontWeight: 'bold', mb: 0.5}}>