Grila de colecție își ține locul cât timp produsele se încarcă
/collections/shop-all avea CLS 0,2999 pe mobil, iar /collections/accessories 0,3373 — de trei ori bugetul, și singurul criteriu încă roșu din checklistul de lansare. Măsurat pe producție azi, nu luat din issue.
Amândouă paginile confundau „încă nu știm" cu „listă goală": useCollectionProducts întoarce null până la primul răspuns, ruta dădea grilei [], grila desena mesajul de o linie „nu sunt produse", iar o clipă mai târziu soseau 31 de carduri și împingeau subsolul câteva mii de pixeli în jos.
Ce s-a schimbat
Numărul nu e ghicit. Metadatele colecției sosesc cu o cerere înaintea produselor și le numesc pe toate, deci grila ține exact atâtea celule — plus dalele promoționale pe o pagină de brand, care ocupă celule proprii și vin din același răspuns.
Celula rezervată nu desenează nimic. Proiectul n-are niciun schelet de încărcare nicăieri, iar un tratament vizual de încărcare e decizie vizuală, nu tehnică. Precedentul e chiar PageFallback din CollectionRoute.tsx, un bloc min-h-screen gol. Componenta stă lângă cardul pe care îl înlocuiește, ca o schimbare la unul să se vadă de la celălalt.
Numărul de produse arată de la prima vopsire cifra finală, deci nici textul nu se corectează sub cititor. O cerere picată păstrează exact comportamentul de azi — fără celule rezervate, cu linia de colecție goală — în loc să țină locul pentru produse care nu mai vin.
Verificat
Pe build-ul real, la 375px, /collections/shop-all:
| în încărcare | după sosire | |
|---|---|---|
| celule | 45 | 45 |
| carduri | 0 | 45 |
| subsol | 8.587px | 9.323px |
| „produse" | 45 | 45 |
Diferența de 736px cade la unsprezece ecrane sub fold, unde nimic din ce se mișcă nu e pe ecran. Nimic deasupra grilei nu se mișcă. Pe /collections/accessories: 17 celule, subsol 3.640 → 3.805px.
Paginile de brand măsoară deja CLS 0,0000 (hypervolt, normatec) — grila e scurtă și subsolul e sub fold — dar poartă același defect în cod și l-au primit pe același fix; e gratis și le apără dacă o colecție crește.
Testele au fost verificate că pot cădea: scoțând dalele din numărătoare, testul lor devine roșu.
Frontend: tsc --noEmit -p tsconfig.app.json curat, oxlint cu singurul avertisment preexistent din src/App.tsx:69, 214 teste în 27 de fișiere (erau 207), build curat. Fișierul nou de test nu adaugă nimic la cele 45 de erori preexistente din tsconfig.test.json (#39 (closed)).
Cifra de CLS pe producție se măsoară după deploy — o pagină ascunsă nu înregistrează layout-shift, deci nicio rulare locală nu poate da numărul.
Decizie vizuală, dacă vrei alta
Celulele rezervate sunt goale, albe. Cardul real stă pe o dală gri deschis; dacă preferi ca în încărcare să se vadă grila de dale gri în loc de spațiu gol, e o singură linie. Am ales varianta care nu introduce niciun element vizual nou.
Part of #33 (closed)