Favicon loaderPro
While a background tab generates, the favicon becomes a tiny pixel grid loader and the title reads (42%) Your title. A done or failed badge waits on your favicon until the tab is seen, then both are restored.
On this page
ProStart a job and switch tabs: the real favicon and title carry the progress. The tab here is a preview.
Installation
Usage
import { FaviconLoader } from "@/components/ui/chatcn/pro/favicon-loader"
<FaviconLoader active={job.active} progress={job.progress} status={job.status} />It renders nothing and does nothing while the tab is visible. Once the tab is hidden it saves your favicon links and title, draws frames into a 32 px canvas and writes them as a PNG data URL. When the tab comes back, the job stops or the component unmounts, everything is put back. If the app renames the page meanwhile, the new title is kept.
useFaviconLoader returns the current frame and title. With preview: true it draws for an in-page preview without touching the document, which is how the tab above is drawn.
Examples
Frames
ProEach frame at 4x: no progress, early, late, and the done and failed badges.
Props
| Prop | Type | Notes |
|---|---|---|
active | boolean | A job is in flight. Default true |
progress | number | 0 to 1. Lights cells. Without it one cell circles the grid |
status | "running" | "done" | "error" | Default running |
title | boolean | Prefix the tab title. Default true |
runningLabel, doneLabel, errorLabel | string | Title prefixes. Default "Working", "Done", "Failed" |
preview | boolean | Hook only: draw for a preview, never touch the document |
How it draws
- A rounded plate in the ink token holds a 3 x 3 grid of the kit's squares, so the mark reads on light and dark tab strips. Progress lights cells in reading order and the next cell blinks.
- Background tabs throttle timers to about once a second, so every frame is designed to read on its own.
- The done badge is a green check, the failed badge a red mark, each cut out of your own favicon with a ring so it reads on any icon.
Accessibility
- The favicon and title are extra signals for sighted people in another tab. Keep announcing completion in the page itself, as the progress components do.
Motion
- Frames step only while the tab is hidden, where reduced motion does not apply to the page. Nothing animates in the visible page.