OptimisticToggle
Client island: an on/off control (read, saved, starred) that is a real POST form.
- Ana RuizStatus page shows the wrong time zone
- Kenji MoriCan we pause checks during a deploy?
- Lea NovakWebhook retries look duplicated
View code
<OptimisticToggle
action={`/inbox/${conversation.id}/star`}
name="starred"
pressed={conversation.starred}
fields={{ returnTo: "/inbox" }}
labels={{ label: "Star", failed: "Failed" }}
pressedContent={<StarIcon size={16} fill="currentColor" aria-hidden="true" />}
unpressedContent={<StarIcon size={16} aria-hidden="true" />}
/>
<OptimisticToggle
action={`/inbox/${conversation.id}/read`}
name="read"
pressed={conversation.read}
fields={{ returnTo: "/inbox" }}
labels={{ label: "Read", failed: "Failed" }}
pressedContent={<CircleCheckIcon size={16} aria-hidden="true" />}
unpressedContent={<CircleIcon size={16} aria-hidden="true" />}
/>
// The action answers the background post with 204, and a plain form post with a redirect:
if (ctx.request.headers.get("x-optimistic-toggle")) return new Response(null, { status: 204 });
return redirect(returnTo, 303);Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { OptimisticToggle } from "@sdxc/ui/app";Renders the form and its toggle button, with both states' content in the markup so a
flip is a change of data-pressed on the form.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.