Automatic Retry with a Visible Countdown

ProNew

When an upload fails the file retries by itself after 2, 4 and 8 seconds, shows "Retrying in 4s (attempt 2 of 3)" with Retry now and Stop buttons, and gives up with a clear message. Use this when failures are usually temporary and people should see that something is being done.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

maxRetries3

baseSeconds2

Guide and examples

When to use it

Uploads fail mostly from flaky networks and an automatic retry is better than an error and a button.

Do not use it when: Do not retry failures that will never succeed (403, 413); show them at once.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`upload`	`Uploader`	flaky demo	The transport.
`maxRetries`	`number`	`3`	Automatic retries before giving up.
`baseSeconds`	`number`	`2`	First wait; each wait doubles.

backoffSeconds(failures, base) is exported.

Accessibility

The countdown is a polite status line ("Retrying in 4s (attempt 2 of 4)") that updates once a second as text; Retry now and Stop have the file name in their names, and the file's state is also written as a word.
Giving up is an alert that says why (stopped by you, or all attempts used) and offers Try again, so a failure is never a dead end.
No hidden timers survive: the countdown stops when the component unmounts.

Testing

The pattern ships with a Testing Library test (upload-retry-backoff-countdown.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.