fix(sonuc): harita en üste çıkar, liste sayısı çerezi kaymayı sıfırlar
Manuel listenin haritası /sonuc'ta tablonun altından sayfanın en üstüne alındı: listesini kurmuş ziyaretçi ekranda önce kendi listesini görür. Liste boşken harita DOM'a hiç girmez — yer tutucu da çizilmez, tadımlık main'in ilk çocuğu kalır ve first:mt-0 çalışmayı sürdürür. Yani ürünü ilk kez gören ziyaretçide sayfa sırası hiç değişmiyor. Çerez neden gerekti: manuel liste localStorage'ta yaşıyor, store'un sunucu snapshot'ı her zaman boş liste dönüyor. Harita yukarıdayken kayıtlı liste ancak hidrasyondan sonra okunabildiği için harita sonradan belirip sayfayı itiyordu (mobilde ~146 px, masaüstünde ~368 px; CLS ~0,13 / ~0,35). Client artık listenin yalnızca UZUNLUĞUNU kolaytercih.liste-sayi çerezine aynalıyor (kişisel veri ya da program kimliği yok, öznitelikleri kolaytercih.profil ile birebir aynı); sunucu bunu okuyup haritaya ilk boyada tam ölçülü yer ayırıyor, chunk inince kutunun yalnızca içi doluyor. Çerez hidrasyona kadar geçerli: store okunduktan sonra tek doğru kaynak listenin kendisi, böylece bayat çerez ya da çekmeceden boşaltılan liste durumunda boş harita ekranda kalmıyor. Yanında: harita iskeletine motion-reduce:animate-none (artık katlamanın üstünde, durdurulamaz nabız gösterilmemeli), yurt dışı şeridine sabit yükseklikli loading yer tutucu (ssr:false + loading'siz dynamic, yoktan beliren ~104 px). Kararın tersini belgeleyen üç yorum bloğu da güncellendi. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,7 @@ import {
|
||||
SonucProgramTablosuSkeleton,
|
||||
} from "@/features/liste/components/sonuc-program-tablosu";
|
||||
import { ManuelHarita } from "@/features/liste/components/manuel-harita";
|
||||
import { LISTE_SAYI_CEREZ_ADI } from "@/features/liste/liste-dogrula";
|
||||
import { TadimlikBolumu } from "@/features/rapor/components/tadimlik-bolumu";
|
||||
import { SonucSihirbazi } from "@/features/sihirbaz/components/sihirbaz-bolumu";
|
||||
import { SiraGerekli } from "@/features/sihirbaz/components/sira-gerekli";
|
||||
@@ -85,6 +86,17 @@ export default function SonucPage({
|
||||
const uniturGrubu =
|
||||
tipHam === "devlet" || tipHam === "vakif" ? tipHam : undefined;
|
||||
|
||||
// Manuel liste localStorage'ta yaşar; store'un sunucu snapshot'ı her
|
||||
// zaman boştur. Client, listenin yalnızca UZUNLUĞUNU çereze aynalar
|
||||
// (liste-store.ts) — sunucunun "bu ziyaretçinin listesi var" bilgisini
|
||||
// hidrasyondan ÖNCE alabildiği tek kanal bu. Sayı > 0 ise haritaya tam
|
||||
// ölçülü yer ayrılır; çerez yoksa/0 ise harita hiç render edilmez.
|
||||
const listeSayisi = Number.parseInt(
|
||||
cerezler.get(LISTE_SAYI_CEREZ_ADI)?.value ?? "",
|
||||
10,
|
||||
);
|
||||
const haritayaYerAyir = Number.isFinite(listeSayisi) && listeSayisi > 0;
|
||||
|
||||
if (!Number.isFinite(sira) || sira < 1 || sira > 4_000_000) {
|
||||
return (
|
||||
<>
|
||||
@@ -97,21 +109,26 @@ export default function SonucPage({
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 text-slate-900">
|
||||
<main className="mx-auto max-w-4xl px-4 py-12">
|
||||
{/* Sayfa hiyerarşisi: tadımlık → ham tablo → manuel listenin
|
||||
haritası. Tadımlık, ödeme öncesi gösterebildiğimiz TEK gerçek
|
||||
önizleme olduğu için ilk ekranda durur.
|
||||
{/* Sayfa hiyerarşisi: manuel listenin haritası → tadımlık → ham
|
||||
tablo. İki farklı ziyaretçi, iki farklı ilk ekran:
|
||||
|
||||
Harita neden TABLONUN ALTINDA: liste store'unun sunucu
|
||||
snapshot'ı her zaman boş liste döner (liste-store.ts), kayıtlı
|
||||
liste ancak hidrasyondan sonra okunur. Harita yukarıda olsaydı
|
||||
dönüş ziyaretçisinde sayfa açıldıktan saniyeler sonra ~368 px
|
||||
yüksekliğinde belirip tadımlığı ve tabloyu aşağı itecekti
|
||||
(impact fraction ~1, CLS eşiğinin çok üstü). Aşağıda belirince
|
||||
yalnızca sihirbaz ile dipnotu iter, ikisi de katlanın altında.
|
||||
Bilgi mimarisi olarak da doğru sıra: harita, tablodan kurulan
|
||||
listenin görselleştirmesidir. Liste boşken hiç render edilmez
|
||||
(bkz. manuel-harita.tsx); store'a abone olduğu için tablodan
|
||||
"+" ile eklenenler buraya canlı yansır. */}
|
||||
• Listesi OLAN ziyaretçi ekranda önce kendi kurduğu listeyi
|
||||
görür — o kişi "bu ürün ne?" aşamasını geçmiştir.
|
||||
• Listesi OLMAYAN ziyaretçide harita DOM'a hiç girmez
|
||||
(manuel-harita.tsx), sıra bugünküyle birebir aynı kalır:
|
||||
tadımlık → tablo. Tadımlık, ödeme öncesi gösterebildiğimiz
|
||||
TEK gerçek önizleme olduğu için o kişide ilk ekranda durur
|
||||
ve `first:mt-0` ile main'in py-12'sini kullanmayı sürdürür.
|
||||
|
||||
Harita YUKARIDA nasıl CLS üretmiyor: kayıtlı liste ancak
|
||||
hidrasyondan sonra localStorage'tan okunabildiği için harita
|
||||
yukarıdayken sonradan belirip sayfayı iterdi (mobilde ~146 px,
|
||||
masaüstünde ~368 px). Çözüm, listenin SAYISINI çerezle
|
||||
sunucuya aynalamak (haritayaYerAyir, yukarısı): sunucu ilk
|
||||
boyada haritanın tam ölçülü kutusunu çizer, chunk inince
|
||||
kutunun yalnızca İÇİ dolar. Haritanın yerini bir daha
|
||||
aşağı almadan önce bu mekanizmayı kontrol et. */}
|
||||
<ManuelHarita yerAyir={haritayaYerAyir} />
|
||||
|
||||
{/* Girişsiz tadımlık: gerçek rapor satırı formatında tek örnek.
|
||||
Havuzda içerik yoksa bileşen hiç render edilmez. */}
|
||||
@@ -128,8 +145,6 @@ export default function SonucPage({
|
||||
uniturGrubu={uniturGrubu}
|
||||
/>
|
||||
|
||||
<ManuelHarita />
|
||||
|
||||
{/* Sihirbaz akışı (CTA + modal) — üretim ve liste /listem'de
|
||||
yaşar, burada yalnızca funnel kartları render edilir */}
|
||||
<SonucSihirbazi
|
||||
|
||||
Reference in New Issue
Block a user