Parent : [[INDEX-WEB-UIUX]]

Web UI/UX - Image Fade-In Loading Transition : opacity 0→1, duration-500, onLoad handler

Problème

Une image qui apparaît brutalement crée un effet de "flash" désagréable. Le chargement progressif (top-to-bottom) est moche sur des layouts grids.

Solution

Image avec opacity: 0 initiale + transition: opacity duration-500 + onLoad qui passe à opacity: 1. Le conteneur a un fond placeholder.

// Card thumbnail
<div className="relative w-full h-52 overflow-hidden rounded-t-[5px] bg-[#0d0e11]">
  {thumbnail ? (
    <img
      src={thumbnail}
      alt={asset.title}
      width={400}
      height={208}
      loading="lazy"
      decoding="async"
      className="w-full h-full object-cover transition-all duration-500 group-hover:scale-105"
      style={{ opacity: 0 }}
      onLoad={(e) => { (e.target as HTMLImageElement).style.opacity = '1' }}
    />
  ) : (
    <div className="w-full h-full flex items-center justify-center">
      <span className="text-5xl text-white/10 font-mono">⚙</span>
    </div>
  )}
</div>

Points clés

1. style={{ opacity: 0 }} initial : l'image est invisible au départ
2. transition-all duration-500 : fade smooth de 500ms
3. onLoad handler : déclenche le fade quand l'image est prête
4. Fond placeholder bg-[#0d0e11] : évite le flash blanc avant chargement
5. group-hover:scale-105 : zoom subtil au hover pour l'interactivité
6. object-cover : remplit le conteneur sans déformer
7. loading="lazy" + decoding="async" : chargement optimisé

Pourquoi

• Élimine le "flash" de chargement d'image
• Le fade crée une sensation de fluidité
• Le placeholder empêche le layout shift (CLS)

Quand l'utiliser

• Grids d'images (e-commerce, galleries, dashboards)
• Thumbnails, avatars, covers

Quand NE PAS l'utiliser

• Hero image (charger avec priority, pas de fade)
• Icônes SVG (chargement instantané)

Références

• ProjectAlpha/AssetCard.tsx L85-97
• ProjectAlpha/AssetModal.tsx L106-116