fix: eliminate checkout/cart layout shift and low-contrast muted text
Live Lighthouse + performance-trace audits against the running dev app found two real, measurable defects: - /checkout and /warenkorb rendered the cart-store's default empty state before Zustand's persist middleware finished reading localStorage, so any customer who already had items in their cart saw an "empty cart" flash before the real form appeared (CLS 0.82). Fixed by tracking hasHydrated in the store and rendering the existing route skeleton until rehydration completes. Verified via Chrome DevTools performance trace: CLS 0.82 -> 0.00 on both pages. - axe-core (via Lighthouse) flagged text-ink/60 on the cream background at 4.09:1 contrast, under the 4.5:1 WCAG AA minimum for normal-size text. Bumped to text-ink/70 (5.61:1) everywhere the same token is used at text-xs/text-sm across 7 files. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
1 parent
6143e5704d
commit
0402f7510d
8 files changed
+43
-12
No files matched your search
@@ -16,6 +16,13 @@ export interface CartItem {
|
||||
interface CartState {
|
||||
items: CartItem[];
|
||||
isOpen: boolean;
|
||||
// Client-only: waehrend des Server-Renders und des allerersten Client-
|
||||
// Renders (bevor persist localStorage gelesen hat) ist dies immer false,
|
||||
// damit UI, die auf "items.length === 0" verzweigt (Checkout/Warenkorb),
|
||||
// nicht kurz einen falschen "leerer Warenkorb"-Zustand zeigt, bevor die
|
||||
// echten, aus localStorage wiederhergestellten Positionen ankommen.
|
||||
hasHydrated: boolean;
|
||||
setHasHydrated: (hasHydrated: boolean) => void;
|
||||
openCart: () => void;
|
||||
closeCart: () => void;
|
||||
addItem: (item: Omit<CartItem, "quantity">, quantity?: number) => void;
|
||||
@@ -29,6 +36,8 @@ export const useCartStore = create<CartState>()(
|
||||
(set) => ({
|
||||
items: [],
|
||||
isOpen: false,
|
||||
hasHydrated: false,
|
||||
setHasHydrated: (hasHydrated) => set({ hasHydrated }),
|
||||
openCart: () => set({ isOpen: true }),
|
||||
closeCart: () => set({ isOpen: false }),
|
||||
addItem: (item, quantity = 1) =>
|
||||
@@ -64,6 +73,9 @@ export const useCartStore = create<CartState>()(
|
||||
// UI-Zustand und darf nach einem Seiten-Reload nicht wiederhergestellt
|
||||
// werden (sonst poppt das Cart-Drawer nach jedem Reload erneut auf).
|
||||
partialize: (state) => ({ items: state.items }),
|
||||
onRehydrateStorage: () => (state) => {
|
||||
state?.setHasHydrated(true);
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user