import { flushSync } from "react-dom";

/**
 * Navigates with a native View Transition cross-fade. react-router's own
 * `viewTransition` navigate option only works with the data router
 * (createHashRouter/RouterProvider) - this app uses the plain declarative
 * <HashRouter>/<Routes>, so the native API is driven manually. flushSync
 * forces the DOM update to happen synchronously inside the callback, which
 * the API requires.
 *
 * Callers are responsible for keeping the current query string alive
 * (kiosk/device config, see config-schema.js) by including it in `path`.
 */
export const navigateWithTransition = (navigate, path) => {
  if (document.startViewTransition) {
    document.startViewTransition(() => flushSync(() => navigate(path)));
  } else {
    navigate(path);
  }
};