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-08-09T09:40:49.275Z

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.

Hydrate Fallback

This is the HydrateFallback component...

Shown while React is hydrating on the client and the loader is running. This provides a smooth loading experience.

Example Code

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