Inconsistent lazy‑load image placeholder behavior in <VsfProduct> component

Recommended loading strategy for VSF 2.5

Use native loading="eager" (or omit the attribute) for the above-fold product hero image. Use loading="lazy" only for below-fold product thumbnails. Always reserve space with explicit width/height or CSS aspect-ratio, plus object-fit: cover and a placeholder background or valid placeholder src/data URI. There is no evidence that an upcoming VSF patch will resolve the inconsistency; treat placeholder behavior as version-sensitive until you verify it against your installed release and component source.

Likely explanation versus confirmed facts

Likely explanation

VSF 2.5 documentation does not define a definitive loading strategy for <VsfProduct>. Inconsistent placeholders are likely caused by lazy images initializing before the intersection observer fires, missing width/height or aspect ratio, or a custom wrapper replacing src after mount.

Confirmed practice

Setting explicit dimensions and a placeholder color prevents layout shift and broken-image icons while the real image loads. This is general browser behavior, not VSF-specific.

Steps for this case

1. Open the product template that renders <VsfProduct> or its image slot.
2. Set the hero image to loading="eager" or remove loading; set below-fold images to loading="lazy".
3. Add width, height, or a wrapper with aspect-ratio, and object-fit: cover.
4. Provide a placeholder src, data URI, or background color so no broken image appears during load.
5. Pin the VSF version in package.json and regression-test placeholder rendering after upgrades.

Verification

• Open browser DevTools on the SSR HTML and after a client route change; inspect the img for loading, width/height, src versus data-src, and any placeholder class.
• Scroll to a below-fold image and confirm the placeholder appears before the image loads, with no broken-image icon.
• Check the installed version: grep -E '"@vue-storefront|vsf"' package.json (adjust to your lockfile if needed).
• If a VsfProduct.vue source file exists in your theme, inspect it for a default loading prop or custom lazy directive and configure or bypass it.

Missing diagnostic detail

Is the affected image above the fold, or is it wrapped in a custom lazy-loading directive or component? This determines whether loading="lazy" is appropriate or should be removed.

Assumptions and uncertainty

This answer assumes <VsfProduct> exists in your installed VSF 2.5 theme or package. That component is not universally documented, so verify its presence before editing. The claim about an upcoming patch is unsupported; do not rely on a future fix.