import { useEffect } from 'react';

/**
 * Dismiss the server-rendered page once React is showing a real one.
 *
 * The server can answer `/`, `/en` and `/nl` with the marketing page already
 * rendered into a `#ssr` element — full HTML for crawlers, instant paint for
 * people — while `#root` stays hidden by a style rule the server injects
 * beside it. Removing `#ssr` is what reveals the live app, so it must happen
 * exactly when a screen worth looking at has mounted: doing it from the app's
 * loading state would swap a finished page for a spinner, which is the flash
 * all of this exists to avoid.
 *
 * Called by every screen that can be the first real one on a server-rendered
 * path. On a page the server did not render there is no `#ssr` and this is a
 * no-op.
 */
export function useDismissSsr(): void {
  useEffect(() => {
    document.getElementById('ssr')?.remove();
  }, []);
}