fix(detail): pin slide image to fixed-height box to stop per-switch resize flicker

[Zheaoli]

Problem

After #533 pinned the detail-view image-area container to a fixed sm:h-[90vh] box, switching photos still showed a visible jump/flicker. Live DevTools profiling on a prod build pinpointed the cause as the <img> element resizing per aspect ratio inside the fixed container.

Fix (two commits)

1. Pin the image to sm:h-full (was object-contain md:max-h-[90vh]): the image element should equal the container height and letterbox the photo via object-contain, instead of sizing to the photo's contained height (which differs per aspect → resize).

2. Give the ProgressiveImage root wrapper a height (<div className="relative"> → relative sm:h-full): height:100% only resolves when every ancestor up to the fixed-height slide has a definite height. The wrapper between the slide and the <img> had none, so it collapsed to content height and the img's h-full fell back to the image's own contained height (~607px landscape, ~1366px portrait — and overflowing, since commit 1 removed the max-h cap). This was the residual "frantic flicker". With the wrapper height set, the chain is continuous (container → viewport → slide → wrapper → img) and the img is a constant 90vh for every aspect.

Also shortened the preview fade-in 1s → 150ms.

Verification

• Walked the live height chain: the break was at <div className="relative"> (607px, content height). Injecting height:100% on it made the slide img go 607 → 810px (= container) for all visible slides — confirming fix v0.5.0 #2 before shipping.
• Container measured constant 810px; img is what varied by aspect.
• data-flip-target is on the slide div (unchanged box); the open transition's containedBox(box, aspect) letterboxes within it, so the FLIP landing is unaffected.
• Mobile (<sm) unchanged: no fixed height, content-sized.
• Build confirmed prod (pnpm build / NODE_ENV=production / node server.js), so the flicker was real, not a dev-mode artifact.

On the src re-set (deferred, likely benign)

Profiling showed each visible slide's <img src> is re-set to the same value ~11×/switch (carousel re-render). Tested live: this fires a load event but keeps img.complete === true and the natural dimensions throughout, i.e. Chrome retains the decoded pixels with no visible blank. So it does not appear to cause a visible flash. If any residual flash remains after this height fix, the next step (separate PR) is memoizing the slides so a switch doesn't re-render unchanged images — kept out of this PR because it touches the keep-mounted WebGL zoom lifecycle and isn't justified by a confirmed visible flash.

---

Update: third commit — letterbox the blur placeholder (0ed3ca6)

Once the image is pinned to a constant 90vh box, the blur placeholder also needs to letterbox. next/image derives the blur's background-size from style.objectFit (get-img-props.js: backgroundSize = imgStyle.objectFit), not the className. With only className="object-contain", objectFit was undefined → the blur defaulted to cover and filled the whole 90vh box while the real image letterboxed smaller → a visible "blur fills → image shrinks" jump on load (worst for portraits). Confirmed live (blur background-size: cover) and against Next's source.

Fix: style={{ objectFit: 'contain' }} on the preview image → blur letterboxes the same way → smooth sharpen+fade load, no size jump.

Branch HEAD 0ed3ca6 is the complete fix: ① img sm:h-full ② wrapper sm:h-full ③ blur objectFit: 'contain'. Deploy must build this exact HEAD (an earlier deploy shipped only commit 1 → img grew unbounded to ~1366px and overflowed → worse than #533; that was a stale build, not a code error).

---

Update: fourth commit — keep tone analysis on switch (4901079)

With the image fully stabilized (commits 1–3 verified live: img constant 810, blur letterboxed), the remaining flicker was the info panel, isolated to ToneAnalysis: it returned a spinner unconditionally while loading (if (loading) return <spinner>), so every switch collapsed the whole tone section to a tiny spinner and re-expanded it, shifting the histogram/device rows below (up then back) = "info panel flashes/reloads on switch".

#532 added the loading && !histogram guard to the histogram chart but not to tone analysis, so the histogram stopped flickering while this kept doing it. Fix: same guard — if (loading && !toneData) — only show the spinner on first analysis; keep previous tone values during a switch (the #521 LRU cache returns instantly for revisits). Confirmed via live churn capture (the animate-spin text-sm text-muted-foreground spinner = tone-analysis:223) + three-way review.

Branch HEAD 4901079 is the full detail-flicker fix: ① img sm:h-full ② wrapper sm:h-full ③ blur objectFit: contain ④ tone loading && !toneData guard.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
picimpact	Ready	Preview, Comment	Jun 12, 2026 1:30pm

[Zheaoli]

Superseded by #536. #535 (merged to main) removed the preview fade animation and touches the same MotionImage block, so this branch (based on pre-#535 main) would conflict. #536 re-applies the still-needed fixes (image height pin, blur letterbox, tone-panel guard) cleanly on top of main+#535, keeping #535's fade removal.