CLS 0,3 pe paginile de colecție: subsolul sare când se umple grila

Checklistul de lansare cere CLS sub 0,1 pe mobil. Pe /collections/shop-all raportul Lighthouse pe mobil măsoară 0,3 — de trei ori pragul, singura dintre cele trei pagini verificate care pică acest criteriu. Cât timp criteriul e roșu, punctul de Core Web Vitals din checklist nu se poate bifa (vezi #10 (closed)).

Ce am găsit

Măsurat cu Lighthouse 13.4.1, mobil, pe https://hyperice.md/collections/shop-all:

• CLS total 0,2999, din două deplasări: 0,188 și 0,112
• elementul care se mișcă în ambele: body > div#root > div.flex > footer
• unsized-images trece — deci nu e vorba de imagini fără dimensiuni

Subsolul nu se mișcă singur: e împins în jos de grila de deasupra, care crește de la înălțime zero la câteva mii de pixeli după ce sosesc produsele.

Cauza

frontend/src/pages/CollectionRoute.tsx:62 transformă „încă nu știm" în „listă goală":

  products={products ?? []}

useCollectionProducts întoarce null până la primul răspuns, dar pagina primește []. frontend/src/components/CollectionPage.tsx:254 vede o grilă goală și randează mesajul „nu sunt produse" — un singur rând de text — iar când răspunsul sosește, în locul lui apar 40+ de carduri și tot ce urmează coboară.

Distincția corectă există deja în altă parte din proiect: HeroBanner ține un loaded separat exact ca să nu confunde „se încarcă" cu „nu există" (frontend/src/components/HeroBanner.tsx).

De făcut

• Ține null distinct de [] până la primul răspuns, în loc să-l aplatizezi în CollectionRoute.tsx:62
• Cât timp lista e null, rezervă înălțimea grilei — carduri-schelet la aceleași dimensiuni, sau o înălțime minimă calculată din numărul de coloane — ca subsolul să nu se mai miște
• Mesajul „nu sunt produse" se arată doar după ce răspunsul a sosit și lista chiar e goală

Criteriu de acceptare

Raport Lighthouse pe mobil pentru /collections/shop-all cu CLS sub 0,1, iar pagina arată la fel ca acum după ce s-a încărcat.