@nok-integration/storefront-react 0.22.2 → 0.22.4

package/dist/index.mjs

@@ -5500,7 +5500,7 @@ function resolveAssetUrl(src, base) {
   if (!src.startsWith("/") || src.startsWith("//")) return src;
   return `${base.replace(/\/+$/, "")}${src}`;
 }
-const MAX_AGE_MS = 5 * 6e4;
+const MAX_AGE_MS$1 = 5 * 6e4;
 const CAPACITY = 60;
 class ProductCache {
   constructor(now = () => Date.now()) {
@@ -5515,7 +5515,7 @@ class ProductCache {
     const key = ProductCache.keyFor(sku, market);
     const entry = this.entries.get(key);
     if (!entry) return void 0;
-    if (this.now() - entry.at > MAX_AGE_MS) {
+    if (this.now() - entry.at > MAX_AGE_MS$1) {
       this.entries.delete(key);
       return void 0;
     }
@@ -5543,6 +5543,37 @@ class ProductCache {
     this.entries.clear();
   }
 }
+const MAX_AGE_MS = 5 * 6e4;
+class CartCache {
+  constructor(now = () => Date.now()) {
+    this.now = now;
+  }
+  now;
+  entry = null;
+  version = 0;
+  get() {
+    if (!this.entry) return void 0;
+    if (this.now() - this.entry.at > MAX_AGE_MS) {
+      this.entry = null;
+      return void 0;
+    }
+    return this.entry.cart;
+  }
+  set(cart2) {
+    this.entry = {
+      cart: cart2,
+      at: this.now()
+    };
+    this.version += 1;
+  }
+  get revision() {
+    return this.version;
+  }
+  clear() {
+    this.entry = null;
+    this.version += 1;
+  }
+}
 function createShopFetch(opts) {
   const baseFetch = opts.fetchImpl ?? globalThis.fetch;
   if (!baseFetch) throw new Error("No fetch implementation available");
@@ -5643,6 +5674,7 @@ function NoScreenTitle({ children }) {
   });
 }
 const ShopContext = createContext(null);
+const CartCacheContext = createContext(null);
 function DaznShopProvider({ children, ...config }) {
   const { apiBaseUrl, getToken, market, navigate: hostNavigate, prefetch: hostPrefetch, sessionTransport = "bearer", theme = "auto", notifications = "internal", features, onEvent, locale, assetBaseUrl } = config;
   const listeners = useRef(/* @__PURE__ */ new Set());
@@ -5672,7 +5704,10 @@ function DaznShopProvider({ children, ...config }) {
     } catch {
     }
   }, []);
-  const api = useMemo(() => clientExports.createClient({
+  const cartsRef = useRef(null);
+  cartsRef.current ??= new CartCache();
+  const carts = cartsRef.current;
+  const client2 = useMemo(() => clientExports.createClient({
     baseUrl: apiBaseUrl,
     getToken: stableGetToken,
     fetch: createShopFetch({
@@ -5683,6 +5718,33 @@ function DaznShopProvider({ children, ...config }) {
     credentials: sessionTransport === "cookie" ? "include" : "omit",
     market
   }), [apiBaseUrl, stableGetToken, emit, sessionTransport, market]);
+  const api = useMemo(() => {
+    carts.clear();
+    const remember2 = (cart2) => {
+      carts.set(cart2);
+      return cart2;
+    };
+    const read = (fn) => (...args) => {
+      const before = carts.revision;
+      return fn(...args).then((cart2) => carts.revision === before ? remember2(cart2) : cart2);
+    };
+    const write = (fn) => (...args) => fn(...args).then(remember2);
+    return {
+      ...client2,
+      cart: {
+        ...client2.cart,
+        create: read(client2.cart.create),
+        get: read(client2.cart.get),
+        addItem: write(client2.cart.addItem),
+        updateItem: write(client2.cart.updateItem),
+        removeItem: write(client2.cart.removeItem)
+      },
+      vip: {
+        ...client2.vip,
+        addToCart: write(client2.vip.addToCart)
+      }
+    };
+  }, [client2, carts]);
   const navigate = useCallback((to) => {
     emit({
       type: "navigate",
@@ -5719,8 +5781,11 @@ function DaznShopProvider({ children, ...config }) {
   }), [api, market, products, theme, resolvedFeatures, notifications, locale, assetBaseUrl, emit, subscribe, navigate, hostPrefetch]);
   return jsx(ShopContext.Provider, {
     value: value2,
-    children: jsx(ScreenTitleProvider, {
-      children
+    children: jsx(CartCacheContext.Provider, {
+      value: carts,
+      children: jsx(ScreenTitleProvider, {
+        children
+      })
     })
   });
 }
@@ -5757,6 +5822,9 @@ function useShopFeatures() {
     stockAlerts: true
   };
 }
+function useCartCache() {
+  return useContext(CartCacheContext);
+}
 function ShopLink({ to, children, ...rest }) {
   const navigate = useNavigate();
   const prefetch = usePrefetch();
@@ -8420,26 +8488,26 @@ function VipHelpLink({ onHelp }) {
     })]
   });
 }
-const crumbs = "_crumbs_1c5rq_1";
-const help$2 = "_help_1c5rq_2";
-const skeleton = "_skeleton_1c5rq_3";
-const skConnector = "_skConnector_1c5rq_42";
-const skMain = "_skMain_1c5rq_46";
-const skSubtitle = "_skSubtitle_1c5rq_52";
-const skTimeline = "_skTimeline_1c5rq_56";
-const skStep = "_skStep_1c5rq_63";
-const skStepText = "_skStepText_1c5rq_70";
-const skAside = "_skAside_1c5rq_83";
-const skLine = "_skLine_1c5rq_90";
-const skLineText = "_skLineText_1c5rq_96";
-const skMeta = "_skMeta_1c5rq_104";
-const skBadge = "_skBadge_1c5rq_111";
-const skPrice = "_skPrice_1c5rq_115";
-const skCard = "_skCard_1c5rq_123";
-const skAddress = "_skAddress_1c5rq_131";
-const skSummary = "_skSummary_1c5rq_136";
-const skCell = "_skCell_1c5rq_144";
-const skHelp = "_skHelp_1c5rq_149";
+const crumbs = "_crumbs_19inq_1";
+const help$2 = "_help_19inq_2";
+const skeleton = "_skeleton_19inq_3";
+const skConnector = "_skConnector_19inq_43";
+const skMain = "_skMain_19inq_47";
+const skSubtitle = "_skSubtitle_19inq_53";
+const skTimeline = "_skTimeline_19inq_57";
+const skStep = "_skStep_19inq_64";
+const skStepText = "_skStepText_19inq_71";
+const skAside = "_skAside_19inq_84";
+const skLine = "_skLine_19inq_91";
+const skLineText = "_skLineText_19inq_97";
+const skMeta = "_skMeta_19inq_105";
+const skBadge = "_skBadge_19inq_112";
+const skPrice = "_skPrice_19inq_116";
+const skCard = "_skCard_19inq_124";
+const skAddress = "_skAddress_19inq_132";
+const skSummary = "_skSummary_19inq_137";
+const skCell = "_skCell_19inq_145";
+const skHelp = "_skHelp_19inq_150";
 const styles$B = {
   crumbs,
   help: help$2,
@@ -8644,25 +8712,25 @@ function SkStep({ lines: lines2 }) {
     })]
   });
 }
-const page$3 = "_page_1baop_8";
-const widget = "_widget_1baop_18";
-const titleRow = "_titleRow_1baop_26";
-const headline$2 = "_headline_1baop_42";
-const track$5 = "_track_1baop_74";
-const rule$1 = "_rule_1baop_99";
-const help$1 = "_help_1baop_109";
-const helpTitle = "_helpTitle_1baop_115";
-const helpRows = "_helpRows_1baop_122";
-const helpRowEnd = "_helpRowEnd_1baop_131";
-const helpStatus = "_helpStatus_1baop_139";
-const helpRow = "_helpRow_1baop_122";
-const cancel = "_cancel_1baop_197";
-const cancelledHead = "_cancelledHead_1baop_221";
-const cancelledTitle = "_cancelledTitle_1baop_227";
-const cancelledMeta = "_cancelledMeta_1baop_241";
-const aside$1 = "_aside_1baop_249";
-const phoneSkeleton$1 = "_phoneSkeleton_1baop_254";
-const wide$2 = "_wide_1baop_258";
+const page$3 = "_page_j9tz4_8";
+const widget = "_widget_j9tz4_18";
+const titleRow = "_titleRow_j9tz4_26";
+const headline$2 = "_headline_j9tz4_42";
+const track$5 = "_track_j9tz4_74";
+const rule$1 = "_rule_j9tz4_99";
+const help$1 = "_help_j9tz4_109";
+const helpTitle = "_helpTitle_j9tz4_115";
+const helpRows = "_helpRows_j9tz4_122";
+const helpRowEnd = "_helpRowEnd_j9tz4_131";
+const helpStatus = "_helpStatus_j9tz4_139";
+const helpRow = "_helpRow_j9tz4_122";
+const cancel = "_cancel_j9tz4_197";
+const cancelledHead = "_cancelledHead_j9tz4_221";
+const cancelledTitle = "_cancelledTitle_j9tz4_227";
+const cancelledMeta = "_cancelledMeta_j9tz4_241";
+const aside$1 = "_aside_j9tz4_249";
+const phoneSkeleton$1 = "_phoneSkeleton_j9tz4_254";
+const wide$2 = "_wide_j9tz4_258";
 const styles$A = {
   page: page$3,
   widget,
@@ -9039,16 +9107,16 @@ function HelpRow({ label: label2, status, onClick }) {
 function shortRef$1(orderRef) {
   return orderRef.replace(/^ord_/, "");
 }
-const page$2 = "_page_11i01_6";
-const confirmed = "_confirmed_11i01_16";
-const title$h = "_title_11i01_22";
-const headline$1 = "_headline_11i01_47";
-const subtitle$4 = "_subtitle_11i01_65";
-const rule = "_rule_11i01_77";
-const done = "_done_11i01_94";
-const aside = "_aside_11i01_98";
-const phoneSkeleton = "_phoneSkeleton_11i01_103";
-const wide$1 = "_wide_11i01_107";
+const page$2 = "_page_1c6sm_6";
+const confirmed = "_confirmed_1c6sm_16";
+const title$h = "_title_1c6sm_22";
+const headline$1 = "_headline_1c6sm_47";
+const subtitle$4 = "_subtitle_1c6sm_65";
+const rule = "_rule_1c6sm_77";
+const done = "_done_1c6sm_94";
+const aside = "_aside_1c6sm_98";
+const phoneSkeleton = "_phoneSkeleton_1c6sm_103";
+const wide$1 = "_wide_1c6sm_107";
 const styles$z = {
   page: page$2,
   confirmed,
@@ -10064,6 +10132,16 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
     })]
   });
 }
+function messageToNative(message2) {
+  if (typeof window === "undefined") return;
+  const host = window;
+  if (!host.dazn?.native?.isNative) return;
+  try {
+    host.daznNativeBridge?.messageToNative?.(message2);
+  } catch {
+    return;
+  }
+}
 const LOW_STOCK_THRESHOLD = 5;
 function isLowStock(available) {
   return available !== void 0 && available > 0 && available <= LOW_STOCK_THRESHOLD;
@@ -10426,22 +10504,28 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
-  const [cart2, setCart] = useState(null);
-  const [state, setState] = useState("loading");
+  const carts = useCartCache();
+  const [cart2, setCart] = useState(() => carts?.get() ?? null);
+  const [state, setState] = useState(() => {
+    const seeded = carts?.get();
+    if (!seeded) return "loading";
+    return seeded.items.length === 0 ? "empty" : "ready";
+  });
   const [errorCode, setErrorCode] = useState(void 0);
   const [pendingSku, setPendingSku] = useState(null);
   const [handingOff, setHandingOff] = useState(false);
   const load = useCallback(async () => {
-    setState("loading");
+    if (!carts?.get()) setState("loading");
     try {
-      const next = await api.cart.get();
+      const fetched = await api.cart.get();
+      const next = carts?.get() ?? fetched;
       setCart(next);
       setState(next.items.length === 0 ? "empty" : "ready");
     } catch (err) {
       setErrorCode(codeOf(err));
       setState("error");
     }
-  }, [api]);
+  }, [api, carts]);
   useEffect(() => {
     void load();
   }, [load]);
@@ -10561,6 +10645,7 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
     });
   }
   async function handOff(current2) {
+    messageToNative("showLoader");
     setHandingOff(true);
     try {
       const { checkout_url } = await api.cart.handoff();
@@ -10620,7 +10705,7 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
       children: jsx(Button, {
         variant: "primary",
         onClick: () => void handOff(cart2),
-        disabled: handingOff,
+        loading: handingOff,
         children: checkoutLabel ?? t("Proceed to checkout")
       })
     })]
@@ -12929,7 +13014,11 @@ function useCartCount() {
   const shop = useShopOptional();
   const api = shop?.api;
   const subscribe = shop?.subscribe;
-  const [count2, setCount] = useState(null);
+  const carts = useCartCache();
+  const [count2, setCount] = useState(() => {
+    const seeded = carts?.get();
+    return seeded ? seeded.items.reduce((n, i) => n + i.qty, 0) : null;
+  });
   useEffect(() => {
     if (!api) return;
     let live = true;

package/dist/standalone/storefront.mjs

@@ -5500,7 +5500,7 @@ function resolveAssetUrl(src, base) {
   if (!src.startsWith("/") || src.startsWith("//")) return src;
   return `${base.replace(/\/+$/, "")}${src}`;
 }
-const MAX_AGE_MS = 5 * 6e4;
+const MAX_AGE_MS$1 = 5 * 6e4;
 const CAPACITY = 60;
 class ProductCache {
   constructor(now = () => Date.now()) {
@@ -5515,7 +5515,7 @@ class ProductCache {
     const key = ProductCache.keyFor(sku, market);
     const entry = this.entries.get(key);
     if (!entry) return void 0;
-    if (this.now() - entry.at > MAX_AGE_MS) {
+    if (this.now() - entry.at > MAX_AGE_MS$1) {
       this.entries.delete(key);
       return void 0;
     }
@@ -5543,6 +5543,37 @@ class ProductCache {
     this.entries.clear();
   }
 }
+const MAX_AGE_MS = 5 * 6e4;
+class CartCache {
+  constructor(now = () => Date.now()) {
+    this.now = now;
+  }
+  now;
+  entry = null;
+  version = 0;
+  get() {
+    if (!this.entry) return void 0;
+    if (this.now() - this.entry.at > MAX_AGE_MS) {
+      this.entry = null;
+      return void 0;
+    }
+    return this.entry.cart;
+  }
+  set(cart2) {
+    this.entry = {
+      cart: cart2,
+      at: this.now()
+    };
+    this.version += 1;
+  }
+  get revision() {
+    return this.version;
+  }
+  clear() {
+    this.entry = null;
+    this.version += 1;
+  }
+}
 function createShopFetch(opts) {
   const baseFetch = opts.fetchImpl ?? globalThis.fetch;
   if (!baseFetch) throw new Error("No fetch implementation available");
@@ -5643,6 +5674,7 @@ function NoScreenTitle({ children }) {
   });
 }
 const ShopContext = createContext(null);
+const CartCacheContext = createContext(null);
 function DaznShopProvider({ children, ...config }) {
   const { apiBaseUrl, getToken, market, navigate: hostNavigate, prefetch: hostPrefetch, sessionTransport = "bearer", theme = "auto", notifications = "internal", features, onEvent, locale, assetBaseUrl } = config;
   const listeners = useRef(/* @__PURE__ */ new Set());
@@ -5672,7 +5704,10 @@ function DaznShopProvider({ children, ...config }) {
     } catch {
     }
   }, []);
-  const api = useMemo(() => clientExports.createClient({
+  const cartsRef = useRef(null);
+  cartsRef.current ??= new CartCache();
+  const carts = cartsRef.current;
+  const client2 = useMemo(() => clientExports.createClient({
     baseUrl: apiBaseUrl,
     getToken: stableGetToken,
     fetch: createShopFetch({
@@ -5683,6 +5718,33 @@ function DaznShopProvider({ children, ...config }) {
     credentials: sessionTransport === "cookie" ? "include" : "omit",
     market
   }), [apiBaseUrl, stableGetToken, emit, sessionTransport, market]);
+  const api = useMemo(() => {
+    carts.clear();
+    const remember2 = (cart2) => {
+      carts.set(cart2);
+      return cart2;
+    };
+    const read = (fn) => (...args) => {
+      const before = carts.revision;
+      return fn(...args).then((cart2) => carts.revision === before ? remember2(cart2) : cart2);
+    };
+    const write = (fn) => (...args) => fn(...args).then(remember2);
+    return {
+      ...client2,
+      cart: {
+        ...client2.cart,
+        create: read(client2.cart.create),
+        get: read(client2.cart.get),
+        addItem: write(client2.cart.addItem),
+        updateItem: write(client2.cart.updateItem),
+        removeItem: write(client2.cart.removeItem)
+      },
+      vip: {
+        ...client2.vip,
+        addToCart: write(client2.vip.addToCart)
+      }
+    };
+  }, [client2, carts]);
   const navigate = useCallback((to) => {
     emit({
       type: "navigate",
@@ -5719,8 +5781,11 @@ function DaznShopProvider({ children, ...config }) {
   }), [api, market, products, theme, resolvedFeatures, notifications, locale, assetBaseUrl, emit, subscribe, navigate, hostPrefetch]);
   return jsx(ShopContext.Provider, {
     value: value2,
-    children: jsx(ScreenTitleProvider, {
-      children
+    children: jsx(CartCacheContext.Provider, {
+      value: carts,
+      children: jsx(ScreenTitleProvider, {
+        children
+      })
     })
   });
 }
@@ -5757,6 +5822,9 @@ function useShopFeatures() {
     stockAlerts: true
   };
 }
+function useCartCache() {
+  return useContext(CartCacheContext);
+}
 function ShopLink({ to, children, ...rest }) {
   const navigate = useNavigate();
   const prefetch = usePrefetch();
@@ -8420,26 +8488,26 @@ function VipHelpLink({ onHelp }) {
     })]
   });
 }
-const crumbs = "_crumbs_1c5rq_1";
-const help$2 = "_help_1c5rq_2";
-const skeleton = "_skeleton_1c5rq_3";
-const skConnector = "_skConnector_1c5rq_42";
-const skMain = "_skMain_1c5rq_46";
-const skSubtitle = "_skSubtitle_1c5rq_52";
-const skTimeline = "_skTimeline_1c5rq_56";
-const skStep = "_skStep_1c5rq_63";
-const skStepText = "_skStepText_1c5rq_70";
-const skAside = "_skAside_1c5rq_83";
-const skLine = "_skLine_1c5rq_90";
-const skLineText = "_skLineText_1c5rq_96";
-const skMeta = "_skMeta_1c5rq_104";
-const skBadge = "_skBadge_1c5rq_111";
-const skPrice = "_skPrice_1c5rq_115";
-const skCard = "_skCard_1c5rq_123";
-const skAddress = "_skAddress_1c5rq_131";
-const skSummary = "_skSummary_1c5rq_136";
-const skCell = "_skCell_1c5rq_144";
-const skHelp = "_skHelp_1c5rq_149";
+const crumbs = "_crumbs_19inq_1";
+const help$2 = "_help_19inq_2";
+const skeleton = "_skeleton_19inq_3";
+const skConnector = "_skConnector_19inq_43";
+const skMain = "_skMain_19inq_47";
+const skSubtitle = "_skSubtitle_19inq_53";
+const skTimeline = "_skTimeline_19inq_57";
+const skStep = "_skStep_19inq_64";
+const skStepText = "_skStepText_19inq_71";
+const skAside = "_skAside_19inq_84";
+const skLine = "_skLine_19inq_91";
+const skLineText = "_skLineText_19inq_97";
+const skMeta = "_skMeta_19inq_105";
+const skBadge = "_skBadge_19inq_112";
+const skPrice = "_skPrice_19inq_116";
+const skCard = "_skCard_19inq_124";
+const skAddress = "_skAddress_19inq_132";
+const skSummary = "_skSummary_19inq_137";
+const skCell = "_skCell_19inq_145";
+const skHelp = "_skHelp_19inq_150";
 const styles$B = {
   crumbs,
   help: help$2,
@@ -8644,25 +8712,25 @@ function SkStep({ lines: lines2 }) {
     })]
   });
 }
-const page$3 = "_page_1baop_8";
-const widget = "_widget_1baop_18";
-const titleRow = "_titleRow_1baop_26";
-const headline$2 = "_headline_1baop_42";
-const track$5 = "_track_1baop_74";
-const rule$1 = "_rule_1baop_99";
-const help$1 = "_help_1baop_109";
-const helpTitle = "_helpTitle_1baop_115";
-const helpRows = "_helpRows_1baop_122";
-const helpRowEnd = "_helpRowEnd_1baop_131";
-const helpStatus = "_helpStatus_1baop_139";
-const helpRow = "_helpRow_1baop_122";
-const cancel = "_cancel_1baop_197";
-const cancelledHead = "_cancelledHead_1baop_221";
-const cancelledTitle = "_cancelledTitle_1baop_227";
-const cancelledMeta = "_cancelledMeta_1baop_241";
-const aside$1 = "_aside_1baop_249";
-const phoneSkeleton$1 = "_phoneSkeleton_1baop_254";
-const wide$2 = "_wide_1baop_258";
+const page$3 = "_page_j9tz4_8";
+const widget = "_widget_j9tz4_18";
+const titleRow = "_titleRow_j9tz4_26";
+const headline$2 = "_headline_j9tz4_42";
+const track$5 = "_track_j9tz4_74";
+const rule$1 = "_rule_j9tz4_99";
+const help$1 = "_help_j9tz4_109";
+const helpTitle = "_helpTitle_j9tz4_115";
+const helpRows = "_helpRows_j9tz4_122";
+const helpRowEnd = "_helpRowEnd_j9tz4_131";
+const helpStatus = "_helpStatus_j9tz4_139";
+const helpRow = "_helpRow_j9tz4_122";
+const cancel = "_cancel_j9tz4_197";
+const cancelledHead = "_cancelledHead_j9tz4_221";
+const cancelledTitle = "_cancelledTitle_j9tz4_227";
+const cancelledMeta = "_cancelledMeta_j9tz4_241";
+const aside$1 = "_aside_j9tz4_249";
+const phoneSkeleton$1 = "_phoneSkeleton_j9tz4_254";
+const wide$2 = "_wide_j9tz4_258";
 const styles$A = {
   page: page$3,
   widget,
@@ -9039,16 +9107,16 @@ function HelpRow({ label: label2, status, onClick }) {
 function shortRef$1(orderRef) {
   return orderRef.replace(/^ord_/, "");
 }
-const page$2 = "_page_11i01_6";
-const confirmed = "_confirmed_11i01_16";
-const title$h = "_title_11i01_22";
-const headline$1 = "_headline_11i01_47";
-const subtitle$4 = "_subtitle_11i01_65";
-const rule = "_rule_11i01_77";
-const done = "_done_11i01_94";
-const aside = "_aside_11i01_98";
-const phoneSkeleton = "_phoneSkeleton_11i01_103";
-const wide$1 = "_wide_11i01_107";
+const page$2 = "_page_1c6sm_6";
+const confirmed = "_confirmed_1c6sm_16";
+const title$h = "_title_1c6sm_22";
+const headline$1 = "_headline_1c6sm_47";
+const subtitle$4 = "_subtitle_1c6sm_65";
+const rule = "_rule_1c6sm_77";
+const done = "_done_1c6sm_94";
+const aside = "_aside_1c6sm_98";
+const phoneSkeleton = "_phoneSkeleton_1c6sm_103";
+const wide$1 = "_wide_1c6sm_107";
 const styles$z = {
   page: page$2,
   confirmed,
@@ -10064,6 +10132,16 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
     })]
   });
 }
+function messageToNative(message2) {
+  if (typeof window === "undefined") return;
+  const host = window;
+  if (!host.dazn?.native?.isNative) return;
+  try {
+    host.daznNativeBridge?.messageToNative?.(message2);
+  } catch {
+    return;
+  }
+}
 const LOW_STOCK_THRESHOLD = 5;
 function isLowStock(available) {
   return available !== void 0 && available > 0 && available <= LOW_STOCK_THRESHOLD;
@@ -10426,22 +10504,28 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
-  const [cart2, setCart] = useState(null);
-  const [state, setState] = useState("loading");
+  const carts = useCartCache();
+  const [cart2, setCart] = useState(() => carts?.get() ?? null);
+  const [state, setState] = useState(() => {
+    const seeded = carts?.get();
+    if (!seeded) return "loading";
+    return seeded.items.length === 0 ? "empty" : "ready";
+  });
   const [errorCode, setErrorCode] = useState(void 0);
   const [pendingSku, setPendingSku] = useState(null);
   const [handingOff, setHandingOff] = useState(false);
   const load = useCallback(async () => {
-    setState("loading");
+    if (!carts?.get()) setState("loading");
     try {
-      const next = await api.cart.get();
+      const fetched = await api.cart.get();
+      const next = carts?.get() ?? fetched;
       setCart(next);
       setState(next.items.length === 0 ? "empty" : "ready");
     } catch (err) {
       setErrorCode(codeOf(err));
       setState("error");
     }
-  }, [api]);
+  }, [api, carts]);
   useEffect(() => {
     void load();
   }, [load]);
@@ -10561,6 +10645,7 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
     });
   }
   async function handOff(current2) {
+    messageToNative("showLoader");
     setHandingOff(true);
     try {
       const { checkout_url } = await api.cart.handoff();
@@ -10620,7 +10705,7 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
       children: jsx(Button, {
         variant: "primary",
         onClick: () => void handOff(cart2),
-        disabled: handingOff,
+        loading: handingOff,
         children: checkoutLabel ?? t("Proceed to checkout")
       })
     })]
@@ -12929,7 +13014,11 @@ function useCartCount() {
   const shop = useShopOptional();
   const api = shop?.api;
   const subscribe = shop?.subscribe;
-  const [count2, setCount] = useState(null);
+  const carts = useCartCache();
+  const [count2, setCount] = useState(() => {
+    const seeded = carts?.get();
+    return seeded ? seeded.items.reduce((n, i) => n + i.qty, 0) : null;
+  });
   useEffect(() => {
     if (!api) return;
     let live = true;