Set the print once
import { Loader, IntermissionProvider } from "intermission/react";
import { tape } from "intermission/tape";
<IntermissionProvider print={tape}>
<Loader state="thinking" />
<Loader state="done" size={20} />
</IntermissionProvider>
Drive it from your own state
const [phase, setPhase] = useState<LoaderState>("listening");
setPhase(response.streaming ? "composing" : "done");
<Loader state={phase} />
Inline, hidden from screen readers
<span>
<Loader state="searching" size={16} label={null} />
Searching your documents…
</span>
Two prints at once
<IntermissionProvider print={academy}>
<Loader state="working" /> // academy
<Loader state="working" print={grid} /> // grid
</IntermissionProvider>
Without React
import { mount } from "intermission";
import { academy } from "intermission/academy";
const handle = mount(canvas, {
print: academy, state: "working", size: 64,
});
handle.setState("done");
Next.js App Router - read this one
A print is an object of functions, and functions cannot cross
from a Server Component to a Client Component. Import the
print inside a client boundary:
// app/providers.tsx
"use client";
import { IntermissionProvider } from "intermission/react";
import { tape } from "intermission/tape";
export function Providers({ children }) {
return <IntermissionProvider print={tape}>{children}</IntermissionProvider>;
}
Prints are separate entry points, so importing one never bundles the other two.
Click any loader above to restart it - useful for “done”, which
settles once and holds. Honours prefers-reduced-motion by resting on a still frame.