Function createTransactionalSnapshot

packages/router/src/router_resource.ts:74–135

* Creates a signal that tracks the resource snapshot and handles transactional behavior * (freezing during navigation and rollback recovery).

(
  source: Resource<T>,
  router: Router,
  injector: Injector,
)

 * (freezing during navigation and rollback recovery).
 */
function createTransactionalSnapshot<T>(
  source: Resource<T>,
  router: Router,
  injector: Injector,
): {
  snapshot: Signal<ResourceSnapshot<T>>;
  frozenSnapshot: Signal<ResourceSnapshot<T> | null>;
} {
  // Holds a snapshot of the resource to keep the UI masked (frozen) during pending navigations
  // or while recovering from a cancelled navigation.
  const frozenSnapshot = signal<ResourceSnapshot<T> | null>(null);

  // Tracks whether we are in a recovery phase after a cancelled navigation.
  // The intended behavior is that on cancellation, the router reverts to the previous state.
  // This reversion might trigger a new load of the previous state because the signal dependencies
  // changed. If we were to release the frozen resource state immediately, the user would see a loading state
  // for data they were just looking at. To avoid this "loading flash", we retain the frozen
  // value (via frozenSnapshot) during this recovery load/reload until the resource settles.
  const isRollbackRecoveryPending = signal(false);

  const sub = router.events.subscribe((e) => {
    if (e instanceof NavigationStart) {
      isRollbackRecoveryPending.set(false);

      if (frozenSnapshot() === null) {
        // Freeze the snapshot at the start of navigation to keep the UI stable.
        frozenSnapshot.set(source.snapshot());
      }
    } else if (e instanceof NavigationEnd || e instanceof NavigationSkipped) {
      // Navigation succeeded or was skipped, so we can unfreeze and use the live state.
      frozenSnapshot.set(null);
      isRollbackRecoveryPending.set(false);
    } else if (e instanceof NavigationCancel || e instanceof NavigationError) {
      const isRollback =
        e instanceof NavigationError ||
        (e instanceof NavigationCancel &&
          e.code !== NavigationCancellationCode.SupersededByNewNavigation &&
          e.code !== NavigationCancellationCode.Redirect);

      if (!isRollback) return;

      isRollbackRecoveryPending.set(true);
    }
  });

  injector.get(DestroyRef).onDestroy(() => sub.unsubscribe());

  effect(
    () => {
      if (isRollbackRecoveryPending() && !source.isLoading()) {
        isRollbackRecoveryPending.set(false);
        frozenSnapshot.set(null);
      }
    },
    {injector},
  );

  return {