Offline Sync Queue

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/error/error31.tsx instead.

Usage

The file also exports error31Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Error31, error31Demo } from "@/components/blocks/error/error31";

export default function Page() {
  return <Error31 {...error31Demo} />;
}

Props

Behavior notes

• The countdown is real client state: a useEffect-driven setTimeout counts secondsLeft down from a fixed literal (15), and once it hits zero it resets to 15 and increments the attempt number, over and over, exactly the self-restarting pattern of a real offline reconnect loop (with no real network check behind it).
• The Retry button is also real: clicking it manually resets secondsLeft to 15 and bumps the attempt counter, the same transition the countdown performs automatically.
• The pulsing "Listening for connection" dot is pure CSS (animate-pulse), not driven by any timer or real connectivity check.
• The pending-changes list is static demo data representing a device's local sync queue; there's no real storage or sync behind it, removing or completing an item is not implemented since the brief only asks for the queue's fixed contents.