Conversation
…eleton
Three related edits:
1. Add an optional aspectRatio prop (landscape | portrait | square,
default square) to ProductCard, ProductCardSkeleton, and
ProductsSlider. The image container picks the matching aspect-*
class via a data-[aspect-ratio=...] selector. Existing call sites
are unaffected.
2. Fix the skeleton's content area. The rendered card title is
line-clamp-2 but the skeleton reserved height for one line plus a
short price bar, so the layout jumped upward when data resolved.
Three h-4 bars (two title, one price) inside py-2.5 h-18
box-content grid gap-2 now match the rendered card.
3. Collapse the duplicate skeleton in RelatedProductsSectionSkeleton.
It was rendering its own inline tile that mirrored what
ProductCardSkeleton does, and the two had drifted — that's how
(2) crept in. With (2) fixed, the related-products fallback can
render <ProductCardSkeleton aspectRatio={...} /> for each tile
and stay in sync. The Fallback helper is renamed to
RelatedProductsSectionSkeleton and exported so consumers can
render it at a parent fallback (e.g. a page-level Suspense).
Adds a template-rollout-log entry for downstream forks.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three related edits in one PR — together they remove a layout-shift regression, dedupe a skeleton that had drifted, and add a routine catalog feature.
Aspect ratio prop on the product card. `ProductCard`, `ProductCardSkeleton`, and `ProductsSlider` accept an optional `aspectRatio: "landscape" | "portrait" | "square"` (default `"square"`). The image container picks the matching `aspect-*` class via a `data-[aspect-ratio=…]` selector. Existing call sites are unaffected.
Skeleton reserves the right height. The rendered card title is `line-clamp-2`, but the skeleton reserved height for one line plus a short price bar — every grid jumped upward by ~one line the moment data resolved. Three `h-4` bars (two for the wrapping title, one for the price) inside `py-2.5 h-18 box-content grid gap-2` now match the rendered card.
Collapse the duplicate skeleton in `RelatedProductsSectionSkeleton`. It was rendering its own inline tile mirroring what `ProductCardSkeleton` does. The two implementations drifted — that's how (2) regressed. With (2) fixed, the related-products fallback renders `` for each tile and stays in sync automatically. The local `Fallback` helper is renamed to `RelatedProductsSectionSkeleton` and exported so consumers can render it at a parent fallback (e.g. a page-level Suspense) when needed.
Includes a `packages/plugin/template-rollout-log/` entry for downstream forks.
Test plan
🤖 Generated with Claude Code