Hydrate Fallback

The HydrateFallback component is displayed while React hydrates on the client and while the loader runs. This prevents a flash of empty content during initial page load.

Hydration Complete!

Message: Content loaded after hydration!
Loaded At: 2026-01-11T20:46:19.659Z

Example Code

import type { RouteLoaderArgs } from "@udibo/juniper";

export function HydrateFallback() {
  return (
    <div className="loading-spinner">
      <p>Loading...</p>
    </div>
  );
}

export async function loader(args: RouteLoaderArgs) {
  const data = await fetchData();
  return data;
}

export default function Page({ loaderData }) {
  return <div>{loaderData.message}</div>;
}

Tip: Refresh the page to see the HydrateFallback in action again. It's shown during the initial hydration phase.