fix(n1): stabilize cart-dependent hydration

Author: KaiUweCZE

apps/n1/src/app/pokladna/page.tsx

@@ -2,6 +2,7 @@
 import { Button } from "@ui/atoms/button"
 import { useRouter } from "next/navigation"
 import { useEffect, useRef } from "react"
+import { useClientReady } from "@/hooks/use-client-ready"
 import { useAnalytics } from "@/providers/analytics-provider"
 import type { PplAccessPointData } from "@/utils/address-helpers"
 import { accessPointToShippingData } from "@/utils/address-helpers"
@@ -16,13 +17,30 @@ import {
 } from "./_context/checkout-context"
 
 export default function CheckoutPage() {
+  const isClientReady = useClientReady()
+
+  if (!isClientReady) {
+    return <CheckoutLoadingState />
+  }
+
   return (
     <CheckoutProvider>
       <CheckoutContent />
     </CheckoutProvider>
   )
 }
 
+function CheckoutLoadingState() {
+  return (
+    <div className="container mx-auto p-500">
+      <h1 className="font-bold text-2xl text-fg-primary">Načítání pokladny</h1>
+      <p className="mt-200 text-fg-secondary">
+        Načítám obsah košíku a checkout data.
+      </p>
+    </div>
+  )
+}
+
 function CheckoutContent() {
   const router = useRouter()
   const {

apps/n1/src/components/header/cart-popover.tsx

@@ -4,6 +4,7 @@ import { Icon } from "@techsio/ui-kit/atoms/icon"
 import { Popover } from "@techsio/ui-kit/molecules/popover"
 import { Suspense } from "react"
 import { ErrorBoundary } from "@/components/error-boundary"
+import { useClientReady } from "@/hooks/use-client-ready"
 import { cartFlow } from "@/hooks/storefront-preset"
 import { CartContent } from "./cart-content"
 import { CartEmptyState } from "./cart-empty-state"
@@ -12,6 +13,7 @@ import { useHeaderContext } from "./store/header-context"
 
 export const CartPopover = () => {
   const { toggleCart, setIsCartOpen } = useHeaderContext()
+  const isClientReady = useClientReady()
 
   const handleHover = () => {
     toggleCart()
@@ -25,9 +27,13 @@ export const CartPopover = () => {
       <ErrorBoundary
         fallback={<CartPopoverErrorFallback onClose={toggleCart} />}
       >
-        <Suspense fallback={<CartPopoverLoadingFallback />}>
-          <CartPopoverContent onClose={toggleCart} />
-        </Suspense>
+        {isClientReady ? (
+          <Suspense fallback={<CartPopoverLoadingFallback />}>
+            <CartPopoverContent onClose={toggleCart} />
+          </Suspense>
+        ) : (
+          <CartPopoverLoadingFallback />
+        )}
       </ErrorBoundary>
     </div>
   )

apps/n1/src/hooks/use-client-ready.ts

@@ -0,0 +1,13 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export function useClientReady(): boolean {
+  const [isClientReady, setIsClientReady] = useState(false)
+
+  useEffect(() => {
+    setIsClientReady(true)
+  }, [])
+
+  return isClientReady
+}