Migrating Auth0 & React-Router to Tanstack Start or Tanstack React-Router

import React from 'react';

/**
 * Return a boolean indicating if the JS has been hydrated already.
 * When doing Server-Side Rendering, the result will always be false.
 * When doing Client-Side Rendering, the result will always be false on the
 * first render and true from then on. Even if a new component renders it will
 * always start with true.
 */
export function useHydrated() {
  return React.useSyncExternalStore(
    subscribe,
    () => true,
    () => false
  );
}

export interface ClientOnlyProps {
  /**
   * You are encouraged to add a fallback that is the same dimensions
   * as the client rendered children. This will avoid content layout
   * shift which is disgusting
   */
  children(): React.ReactNode;
  fallback?: React.ReactNode;
}

/**
 * Render the children only after the JS has loaded client-side. Use an optional
 * fallback component if the JS is not yet loaded.
 *
 * Example: Render a Chart component if JS loads, renders a simple FakeChart
 * component server-side or if there is no JS. The FakeChart can have only the
 * UI without the behavior or be a loading spinner or skeleton.
 *
 * @see https://github.com/TanStack/router/blob/main/packages/react-router/src/lazyRouteComponent.tsx#L22C16-L22C27
 */
export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  return useHydrated() ? (
    // biome-ignore lint/complexity/noUselessFragments: We need to prevent rendering issues
    <React.Fragment>{children()}</React.Fragment>
  ) : (
    // biome-ignore lint/complexity/noUselessFragments: We need to prevent rendering issues
    <React.Fragment>{fallback}</React.Fragment>
  );
}

/*
|------------------
| Internals
|------------------
*/

function subscribe() {
  return () => {};
}

import React from 'react';

/**
 * Return a boolean indicating if the JS has been hydrated already.
 * When doing Server-Side Rendering, the result will always be false.
 * When doing Client-Side Rendering, the result will always be false on the
 * first render and true from then on. Even if a new component renders it will
 * always start with true.
 */
export function useHydrated() {
  return React.useSyncExternalStore(
    subscribe,
    () => true,
    () => false
  );
}

export interface ClientOnlyProps {
  /**
   * You are encouraged to add a fallback that is the same dimensions
   * as the client rendered children. This will avoid content layout
   * shift which is disgusting
   */
  children(): React.ReactNode;
  fallback?: React.ReactNode;
}

/**
 * Render the children only after the JS has loaded client-side. Use an optional
 * fallback component if the JS is not yet loaded.
 *
 * Example: Render a Chart component if JS loads, renders a simple FakeChart
 * component server-side or if there is no JS. The FakeChart can have only the
 * UI without the behavior or be a loading spinner or skeleton.
 *
 * @see https://github.com/TanStack/router/blob/main/packages/react-router/src/lazyRouteComponent.tsx#L22C16-L22C27
 */
export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
  return useHydrated() ? (
    // biome-ignore lint/complexity/noUselessFragments: We need to prevent rendering issues
    <React.Fragment>{children()}</React.Fragment>
  ) : (
    // biome-ignore lint/complexity/noUselessFragments: We need to prevent rendering issues
    <React.Fragment>{fallback}</React.Fragment>
  );
}

/*
|------------------
| Internals
|------------------
*/

function subscribe() {
  return () => {};
}