feat(themes): reserve product sliders and lists with a loading skeleton

[eslamoo]

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

• Feature: loading skeleton for product sliders and lists.

What is the current behaviour? (You can also link to an open issue here)

• Product sliders and lists are 0px tall until the products API answers, then they grow and push everything below them (footer, testimonials) out of the viewport. Product card images have no width/height, so cards grow again when each image loads. Category pages score 0.4-1.7 CLS.

What is the new behaviour? (You can also link to the ticket here)

• A server-rendered skeleton (pages/partials/product/skeleton.twig) sits in a .products-reserve wrapper before the component and holds its space from the first paint. The products lay out on top of it, out of flow, and app.js removes it once a card is drawn (lists) or Swiper is up (sliders), with a 30s fallback.
• Product card images get width/height from the size in the image URL (e.g. -500x400-) when present.
• Used in: products slider, fixed products, latest products, category and brand pages.

Measured CLS on live stores (cold cache, before -> after):

Page	Desktop	Mobile
fahad3 category	0.673 -> 0.046	1.640 -> 0.009
khyeal-wrdye- category	0.543 -> 0.142	0.797 -> 0.024
brownpoint-25 category	0.432 -> 0.007	0.774 -> 0.012
fahad3 home	0.331 -> 0.044	0.028 -> 0.017
brownpoint-25 home	0.051 -> 0.004	0.010 -> 0.000

Does this PR introduce a breaking change?

• No.

Screenshots (If appropriate)

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 16 complexity · 0 duplication

Metric	Results
Complexity	16
Duplication	✅ 0 (≤ 2 duplication)

View in Codacy

AI Reviewer: run a review on demand. To trigger the first review automatically, go to your organization or repository integration settings. AI can make mistakes. Always validate suggestions.

_{TIP This summary will be updated as you push new changes.}