Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/product-card-skeleton.

When to use it

Use ProductCardSkeleton while a product listing is fetching and the final layout rhythm should stay visible. It is most useful for grids, recommendation rows, and search results.

Composition notes

The component is already shaped like the production product card, so the main job is to place it in the same grid and count that the final results will use.

Behavior and theming guidance

Show enough skeleton cards to communicate the expected layout, but avoid huge walls of placeholders that make the loading state feel heavier than the content itself.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=ProductCardSkeleton.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes