Describe the bug
Across our site we're using toasts to show LOAD errors - this is an incorrect pattern. Toasts should really only be used when there is an action taken (e.g. closing a dialog) with a LAYOUT shift. Toasts are distracting for the user (they must divert their attention from what they're doing to a different area of the screen to see what went wrong)
Where Is Bug/How to Recreate
Steps to reproduce the behaviour: set an invalid DATABASE_URL (of the correct form. E.g. change neon.tech to neon.test
Pages affected:
- Map: "Failed to fetch school data", "Failed to load gateway schools"
- Chart: "Failed to load project data. Please refresh the page.", "Failed to load gateway schools"
- Schools page is just blank
Expected behavior
- Build an error component like
<LoadError message="..." onRetry={refetch} />
- Replace load-error toasts with inline error states. This way the user sees the failure exactly where they're looking
Screenshots
Other comments
N/A
Describe the bug
Across our site we're using toasts to show LOAD errors - this is an incorrect pattern. Toasts should really only be used when there is an action taken (e.g. closing a dialog) with a LAYOUT shift. Toasts are distracting for the user (they must divert their attention from what they're doing to a different area of the screen to see what went wrong)
Where Is Bug/How to Recreate
Steps to reproduce the behaviour: set an invalid DATABASE_URL (of the correct form. E.g. change
neon.techtoneon.testPages affected:
Expected behavior
<LoadError message="..." onRetry={refetch} />Screenshots
Other comments
N/A