@appfunnel-dev/sdk 2.0.0-canary.0 → 2.0.0-canary.1

package/dist/index.d.cts

@@ -1243,6 +1243,14 @@ interface NavigationState {
      */
     nextCandidates: string[];
     canGoBack: boolean;
+    /**
+     * True while a navigation's target page chunk is still resolving (a cold,
+     * un-prefetched lazy chunk). The current page stays on screen during this window
+     * (no Suspense-fallback flicker); read this to show a subtle "working" affordance
+     * so a tapped button doesn't feel dead. Usually false/instant when the next chunk
+     * was prefetched.
+     */
+    isNavigating: boolean;
 }
 /**
  * `const variant = useExperiment('welcome-headline')` — the variant key this

package/dist/index.d.ts

@@ -1243,6 +1243,14 @@ interface NavigationState {
      */
     nextCandidates: string[];
     canGoBack: boolean;
+    /**
+     * True while a navigation's target page chunk is still resolving (a cold,
+     * un-prefetched lazy chunk). The current page stays on screen during this window
+     * (no Suspense-fallback flicker); read this to show a subtle "working" affordance
+     * so a tapped button doesn't feel dead. Usually false/instant when the next chunk
+     * was prefetched.
+     */
+    isNavigating: boolean;
 }
 /**
  * `const variant = useExperiment('welcome-headline')` — the variant key this

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, createElement, useCallback, useContext, useMemo, lazy, useState, useRef, useEffect, Suspense, Fragment, isValidElement, cloneElement, useReducer, useSyncExternalStore } from 'react';
+import { createContext, createElement, useCallback, useContext, useMemo, lazy, useState, useRef, useEffect, useTransition, Suspense, Fragment, isValidElement, cloneElement, useReducer, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { Toaster } from 'sonner';
 export { toast } from 'sonner';
@@ -959,17 +959,18 @@ function FunnelView({
     timer.current = { key: currentKey, enteredAt: now(), hidden: 0, hiddenSince: hidden ? now() : null };
   }, [currentKey, emitExit]);
   useEffect(() => () => emitExit(), [emitExit]);
+  const [isNavigating, startNav] = useTransition();
   const next = useCallback(() => {
     const target = nextPage(flow, currentKey, funnel.snapshot());
     const resolved = target ? experiments.slotOf[target] ?? target : target;
-    if (resolved) setHistory((h) => [...h, resolved]);
+    if (resolved) startNav(() => setHistory((h) => [...h, resolved]));
   }, [flow, currentKey, funnel, experiments]);
   const back = useCallback(
-    () => setHistory((h) => h.length > 1 ? h.slice(0, -1) : h),
+    () => startNav(() => setHistory((h) => h.length > 1 ? h.slice(0, -1) : h)),
     []
   );
   const go = useCallback(
-    (key) => setHistory((h) => [...h, experiments.slotOf[key] ?? key]),
+    (key) => startNav(() => setHistory((h) => [...h, experiments.slotOf[key] ?? key])),
     [experiments]
   );
   const prefetched = useRef(/* @__PURE__ */ new Set());
@@ -998,7 +999,8 @@ function FunnelView({
     go,
     prefetch,
     nextCandidates,
-    canGoBack: history.length > 1
+    canGoBack: history.length > 1,
+    isNavigating
   };
   const renderKey = experiments.render[currentKey] ?? currentKey;
   const Current = components.get(renderKey);