Feedback
How Jaunt tells you something happened, is happening, or went wrong. Every example is the app’s real component.
| What | Use for |
|---|---|
| Toast | The result of something you did: saved, added, failed |
| Success banner | A quick “done” right where you did it |
| Alert chip | A problem with the button you just pressed, shown under it |
| Loading bar | Waiting on something with no real progress to show |
| Error screens | A page that can’t be shown at all |
The wording follows Voice and tone: say what happened, never sorry.
Press a button: the toast appears near the bottom of the screen, at the right edge of the app’s column. On a phone that’s the bottom right; on this wide page it floats nearer the middle.
- One stack for the whole app, fixed just above the footer, so a toast is never off-screen or pushing the page around.
- Shows for 4 seconds, fading in and out over 300ms. Several in a row stack up instead of replacing each other.
- Success or Error colours, 15px corners because a long message wraps.
- Wording: “Dates updated successfully”, “Failed to add place”. An error shows the server’s own message when there is one.
Success banner
Section titled “Success banner”A small success pill shown right where the action happened, then faded away. Used on Who after resending an invite: “Invite resent”.
Loading bar
Section titled “Loading bar”For a wait with no real progress to report, like one search request. It replaced every spinner in the app.
- It fills to 90% over 2.5 seconds, then holds there. It never claims 100%: the result arriving is what says “done”, and the bar just disappears.
- A soft coral shimmer keeps moving across the filled part, so it never looks frozen.
- Small: inside a button, next to “Searching…”. Large: centred over a photo while it uploads.
Error screens
Section titled “Error screens”Inside a jaunt
Section titled “Inside a jaunt”Shown in place of a jaunt page that can’t load. The message depends on why:
| Why | Title | Actions |
|---|---|---|
| You’re not a member | You’re not in this Jaunt | Back to Home |
| It’s been deleted, or the link is wrong | This Jaunt doesn’t exist | Back to Home |
| No signal, or a server error | Couldn’t load this Jaunt | Try again, Back to Home |
Try again asks again for everything on the screen, including the part that failed.
Page not found
Section titled “Page not found”For a link that doesn’t go anywhere. The footer stays, because the app itself is fine.
Something went wrong
Section titled “Something went wrong”When a screen breaks while loading. It covers the whole screen, footer too, because it’s the one thing left standing. It shows the error’s own message under the explanation, to help when reporting it.
All three use the same card: a title pill, a heading, one line, then the actions. A heading and a body line stacked, with no em dash joining them.
Anatomy
Section titled “Anatomy”| Piece | Value |
|---|---|
| Toast | Body 2 text, 15px corners, Success or Error colours, 4 seconds, 300ms fade, just above the footer |
| Success banner | A fully rounded Success pill, fading in and out |
| Loading bar | Small 32 × 6px, large 96 × 8px. Fills to 90% over 2.5s with a coral shimmer |
| Error card | A light card: title pill, H4 heading, one line, then one or two buttons |
Do and don’t
Section titled “Do and don’t”Waiting: the loading bar, not a spinner
The loading bar replaced every spinner. It fills to 90% and holds until the answer arrives.
Say what happened, never sorry
State the problem plainly (see Voice and tone). There are no apologies anywhere in the app.
A problem with a button goes under that button
Use an alert chip straight after the button. Use a toast for the result of something done elsewhere.
Accessibility
Section titled “Accessibility”- Messages never rely on colour alone: each says what happened in words.
- The loading bar always sits next to a word (“Searching…”), and the button is disabled while it runs.
- Toasts are read out by screen readers as they appear (a live region that’s always there), and so are alert chips.
- With “reduce motion” on, the loading shimmer stops and toasts and chips appear without fading.
Source
Section titled “Source”src/web/components/ToastProvider.tsx,NotificationBanner.tsxsrc/web/components/SuccessBanner.tsxsrc/web/components/LoadingBar.tsxsrc/web/components/ErrorScreens.tsx