@salifbiaye/create-boutique 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Usine à Boutiques : génère un projet complet (backend Medusa + une boutique Next.js par campagne) prêt pour docker compose",
   "type": "module",
   "repository": { "type": "git", "url": "git+https://github.com/salifbiaye/create-boutique.git" },

package/templates/storefront/src/app/layout.tsx

@@ -14,6 +14,7 @@ import "styles/ub/forms.css"
 import "styles/ub/account.css"
 import "styles/ub/black-friday.css"
 import "styles/ub/harvest.css"
+import "styles/ub/media.css"
 import "styles/ub/responsive.css"
 import "styles/ub/fonts.css"
 import "styles/ub/medusa-ui.css"

package/templates/storefront/src/modules/ub/campaign-blocks.tsx

@@ -99,7 +99,7 @@ export function Hero({ campaign }: { campaign: Campaign }) {
           <div className="ub-hero__blob" />
           {image ? (
             // eslint-disable-next-line @next/next/no-img-element
-            <img className="ub-hero__photo" src={image} alt={t("hero.photo")} />
+            <img className="ub-hero__photo" src={image} alt={t("hero.photo")} fetchPriority="high" decoding="async" />
           ) : (
             <div className="ub-hero__photo ub-ph" role="img" aria-label={t("hero.photo")} />
           )}

package/templates/storefront/src/modules/ub/category-tiles.tsx

@@ -3,6 +3,7 @@ import { t } from "@lib/boutique/i18n"
 import { HttpTypes } from "@medusajs/types"
 import { Icon, TILE_ICONS } from "./icons"
 
+import FadeImg from "./fade-img"
 /** Tuiles catégorie : catégories racines de Medusa (6 max), couleurs --tint-1…4 du thème. */
 export default function CategoryTiles({ categories }: { categories: HttpTypes.StoreProductCategory[] }) {
   const roots = categories.filter((c) => !c.parent_category).slice(0, 6)
@@ -21,7 +22,7 @@ export default function CategoryTiles({ categories }: { categories: HttpTypes.St
             <span className="ub-tile__img" style={{ overflow: "hidden" }}>
               {/* Image de la catégorie : admin → catégorie → « Image de la catégorie » */}
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={c.metadata.image} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+              <FadeImg src={c.metadata.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
             </span>
           ) : (
             <span className="ub-tile__img ub-ph" />

package/templates/storefront/src/modules/ub/fade-img.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useEffect, useRef, useState, type ImgHTMLAttributes } from "react"
+
+/**
+ * Image qui apparaît en fondu une fois chargée (le conteneur affiche un fond animé en attendant, cf. styles/ub/media.css).
+ * Chargement différé par défaut ; `priority` pour une image visible dès l'arrivée sur la page.
+ */
+export default function FadeImg({ priority, className = "", alt = "", ...props }: ImgHTMLAttributes<HTMLImageElement> & { priority?: boolean }) {
+  const ref = useRef<HTMLImageElement>(null)
+  const [loaded, setLoaded] = useState(false)
+
+  // Image déjà en cache (chargée avant l'hydratation) : pas d'événement load, on l'affiche directement
+  useEffect(() => {
+    if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true)
+  }, [])
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      ref={ref}
+      alt={alt}
+      loading={priority ? "eager" : "lazy"}
+      decoding="async"
+      fetchPriority={priority ? "high" : "auto"}
+      {...props}
+      className={`ub-fade${loaded ? " is-loaded" : ""}${className ? ` ${className}` : ""}`}
+      onLoad={(e) => {
+        setLoaded(true)
+        props.onLoad?.(e)
+      }}
+      onError={() => setLoaded(true)}
+    />
+  )
+}

package/templates/storefront/src/modules/ub/harvest.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link"
+import { preload } from "react-dom"
 import type { Campaign } from "@lib/boutique/campaign"
 import { getBoutique } from "@lib/boutique/config"
 import { t } from "@lib/boutique/i18n"
@@ -7,6 +8,7 @@ import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import { Icon, type IconName } from "./icons"
 
+import FadeImg from "./fade-img"
 /**
  * Accueil « Harvest » (thèmes Thanksgiving, theme.json → "home": "harvest") : structure différente de l'accueil
  * standard. Hero plein cadre avec titre condensé géant + mot manuscrit et bas en vague (« tache »), services en ligne,
@@ -28,6 +30,8 @@ function Drip() {
 export function HarvestHero({ campaign }: { campaign: Campaign }) {
   const { hero } = campaign
   const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  // Image de fond (CSS) : préchargée en priorité pour qu'elle arrive avant le reste de la page
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
   // Mot manuscrit : en fin de titre, il passe sur sa propre ligne sous le titre condensé ; au milieu de la phrase,
   // il reste à sa place (sinon la phrase devient incompréhensible).
   const hl = hero.highlight && hero.title.includes(hero.highlight) ? hero.highlight : undefined
@@ -120,7 +124,7 @@ export function HarvestGrid({ products, title, sub }: { products: P[]; title: st
                 <span className="ub-hv-card__media">
                   {image ? (
                     // eslint-disable-next-line @next/next/no-img-element
-                    <img src={image} alt="" loading="lazy" />
+                    <FadeImg src={image} alt="" />
                   ) : (
                     <span className="ub-ph" />
                   )}
@@ -186,7 +190,7 @@ export function HarvestStrip({ products }: { products: P[] }) {
           <li key={p.id}>
             <Link href={`/products/${p.handle}`} aria-label={p.title ?? ""}>
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={imageOf(p)} alt="" loading="lazy" />
+              <FadeImg src={imageOf(p)} alt="" />
             </Link>
           </li>
         ))}

package/templates/storefront/src/modules/ub/product-card.tsx

@@ -4,6 +4,7 @@ import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { Icon } from "./icons"
 
+import FadeImg from "./fade-img"
 /** Carte produit des maquettes. Prix calculés par Medusa pour la région de la boutique. */
 export default function ProductCard({ product }: { product: HttpTypes.StoreProduct }) {
   const { cheapestPrice: price } = getProductPrice({ product })
@@ -24,7 +25,7 @@ export default function ProductCard({ product }: { product: HttpTypes.StoreProdu
       >
         {image && (
           // eslint-disable-next-line @next/next/no-img-element
-          <img src={image} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+          <FadeImg src={image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
         )}
       </Link>
       <div className="ub-card__body">

package/templates/storefront/src/modules/ub/showcase.tsx

@@ -4,6 +4,7 @@ import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { Icon } from "./icons"
 
+import FadeImg from "./fade-img"
 type P = HttpTypes.StoreProduct
 const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
 const priceOf = (p: P) => {
@@ -32,7 +33,7 @@ export function DealsFold({ products, title }: { products: P[]; title: string })
                 <Link href={`/products/${p.handle}`} className="ub-fold__link" aria-label={t("card.view", { name: p.title ?? "" })}>
                   {image ? (
                     // eslint-disable-next-line @next/next/no-img-element
-                    <img className="ub-fold__img" src={image} alt="" loading="lazy" />
+                    <FadeImg className="ub-fold__img" src={image} alt="" />
                   ) : (
                     <span className="ub-fold__img ub-ph" />
                   )}
@@ -92,7 +93,7 @@ export function DealsSpotlight({ products, eyebrow, title }: { products: P[]; ey
                   <div key={p.id} className="ub-spot__media" data-i={i}>
                     {image ? (
                       // eslint-disable-next-line @next/next/no-img-element
-                      <img src={image} alt={p.title ?? ""} loading="lazy" />
+                      <FadeImg src={image} alt={p.title ?? ""} />
                     ) : (
                       <span className="ub-ph" />
                     )}

package/templates/storefront/src/styles/ub/harvest.css

@@ -196,7 +196,8 @@
   .ub-hv-strip__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
   .ub-hv-strip__row li { flex: 0 0 62%; scroll-snap-align: center; }
   .ub-hv-head { flex-direction: column; align-items: flex-start; }
-  [data-theme="thanksgiving"]:not([data-variant]) body::after { border-width: 6px; }
+  /* Mobile et tablette : pas de cadre (fixé à l'écran, il suivait le défilement et mangeait la place) */
+  [data-theme="thanksgiving"]:not([data-variant]) body::after { display: none; }
 }
 @media (prefers-reduced-motion: reduce) {
   .ub-hv-title__main, .ub-hv-title__script { animation: none; }

package/templates/storefront/src/styles/ub/media.css

@@ -0,0 +1,37 @@
+/* Chargement des images : fond animé (couleurs du thème) dans le cadre, puis apparition en fondu (FadeImg). */
+.ub-fade {
+  opacity: 0;
+  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.ub-fade.is-loaded { opacity: 1; }
+
+/* Cadres d'images : fond animé tant que la photo n'est pas affichée (masqué ensuite par l'image opaque) */
+.ub-card__media,
+.ub-fold__link,
+.ub-spot__media,
+.ub-hv-card__media,
+.ub-hv-strip__row a,
+.ub-tile__img {
+  background-color: var(--surface);
+  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--tint-1) 80%, transparent) 45%, transparent 70%);
+  background-size: 220% 100%;
+  animation: ub-shimmer 1.6s ease-in-out infinite;
+}
+/* Une fois l'image chargée, plus d'animation (économie de batterie) */
+.ub-card__media:has(.ub-fade.is-loaded),
+.ub-fold__link:has(.ub-fade.is-loaded),
+.ub-spot__media:has(.ub-fade.is-loaded),
+.ub-hv-card__media:has(.ub-fade.is-loaded),
+.ub-hv-strip__row a:has(.ub-fade.is-loaded),
+.ub-tile__img:has(.ub-fade.is-loaded) {
+  animation: none;
+  background-image: none;
+}
+@keyframes ub-shimmer {
+  from { background-position: 120% 0; }
+  to { background-position: -120% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ub-fade { transition: none; }
+  .ub-card__media, .ub-fold__link, .ub-spot__media, .ub-hv-card__media, .ub-hv-strip__row a, .ub-tile__img { animation: none; }
+}