Scroll Progress

Reading progress as a lit tube on the window edge, or a ring for back to top. Follows the page or any container.

New in 1.7.

RFC 0042: At-least-once webhooks

Mira Okafor · 6 min read

Where we are

Relay delivers webhooks at most once. When a receiver times out after we've written the request, we mark the event failed and move on. Last quarter that lost 0.04% of events, about 1.9 million, and every one of them became a support ticket that started with “we never got it”.

Proposal

Move to at-least-once delivery. Each event keeps a delivery id that survives retries, and receivers deduplicate on it. We retry on any non-2xx or timeout with jittered exponential backoff: 10 s, 40 s, 2.5 min, 10 min, then hourly for 24 hours.

What receivers have to do

Store the Relay-Delivery-Id header for 72 hours and drop repeats. The SDKs for Node, Go and Python do this with a one-line Redis or Postgres adapter. Receivers that already key on our event id need no change, which by our logs is 71% of traffic.

Cost

Retries add an estimated 3.8% to outbound volume at today's failure rate. Queue storage grows by 14 GB per region for the 24-hour window. Both fit inside current capacity; no new hardware.

Rollout

Opt-in per endpoint from 4 November, default for new endpoints from 2 December, and default for everyone on 13 January after a month of dashboards showing duplicate rates per receiver.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/scroll-progress.json

Usage

import { ScrollProgress } from "@/components/ui/scroll-progress"

// Follows the page, pinned to the top of the window
<ScrollProgress />

// Follows a scroll container
<ScrollProgress target={articleRef} />

Examples

Ring with a reading

onProgressChange reports whole percentages, so the label renders only when the number changes.

Thin, on a log

This page

Without a target it follows the window. This one is pinned to the bottom edge.

API reference

A progressbar. Also accepts div attributes; children render in the middle of the ring.

Prop	Type	Default
`target`	`RefObject<HTMLElement>` A scroll container to follow.	the page
`variant`	`"bar" \| "ring"` A tube along an edge, or a ring.	`"bar"`
`fixed`	`boolean` Pin the bar to the viewport edge.	`!target`
`position`	`"top" \| "bottom"` Edge a fixed bar sits on.	`"top"`
`thickness`	`number` Tube thickness in pixels.	`3 (bar), 2 (ring)`
`size`	`number` Ring diameter in pixels.	`44`
`onProgressChange`	`(percent: number) => void` Whole-number percentage, 0 to 100, when it changes.	None
`aria-label`	`string` Name of the progressbar.	`"Reading progress"`
`color`	`NeonColor` Color of the tube.	inherited

Accessibility

It's a progressbar with aria-valuenow in whole percent, updated only when the number changes.
Scroll writes go straight to the DOM once per frame: a translate on the lit tube for the bar, a dash and a rotation for the ring. Nothing lays out per frame and React doesn't re-render while you scroll.
The lit tube is translated rather than scaled, so its white-hot tip and halo never stretch. At 100% the whole tube burns a little brighter.
A ResizeObserver catches content that grows or shrinks without a scroll, such as images loading.
Inside a button the ring's children are the button's content; give the button its own aria-label.