[Blazor SSR] Add built-in navigation and form submission indicators
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 290
Description
### Is there an existing issue for this?
- [x] I have searched the existing issues
### Is your feature request related to a problem? Please describe the problem.
In Blazor Static SSR, when navigating between pages or submitting forms (whether using enhanced navigation or `[ExcludeFromInteractiveRouting]`, and whether using streaming rendering or not), there isn't a clear visual feedback mechanism to inform end-users that something is happening in the background.
**Current Issues:**
- Users clicking navigation links don't see any indication that the page is loading
- Form submissions (particularly authentication forms, search forms, etc.) appear unresponsive until the server responds
- This creates a poor user experience, as users might think the application is frozen or broken, causing them to click twice, three times, or even more
- **Attempting to handle this manually (e.g., disabling form controls on submit) breaks Blazor's form submission logic**
- There's no way to prevent duplicate submissions or input changes during form processing without breaking functionality
This is particularly problematic for:
- Search or filter forms where users need feedback that their action was received
- Any navigation or form interaction where latency might cause delays
- Pages using `[ExcludeFromInteractiveRouting]` which have no built-in feedback mechanism
### Describe the solution you'd like
Implement a built-in navigation and form-submission feedback mechanism for Blazor Static SSR, similar in spirit to [htmx’s indicator system](https://htmx.org/docs/#indicators).
**Goal:** provide consistent, automatic visual and UX feedback during:
- Page navigations (enhanced navigation and pages using `[ExcludeFromInteractiveRouting]`, with or without streaming rendering)
- Form submissions (including common scenarios like auth, search, and filtering)
**Proposed behavior:**
1. **Navigation indicators**
- Allow developers to designate indicator elements (e.g., `
- When navigation starts, Blazor automatically toggles a predictable CSS state (for example adding a `.navigating` / `.show` class, or setting an attribute like `data-blazor-state="navigating"`), and removes it when navigation completes.
2. **Form submission indicators**
- Allow developers to designate indicator elements for form submits (e.g., `
- When a form submit begins, Blazor automatically toggles a predictable CSS state (e.g., `.submitting` / `.show`, or `data-blazor-state="submitting"`) and clears it when the submit completes (success or failure).
3. **Automatic control disabling (opt-in)**
- Support an opt-in attribute such as `data-disable-on-submit` that can be applied to a `fieldset` or individual inputs/buttons.
- While a submission is in progress, Blazor temporarily disables the annotated controls to prevent duplicate submissions and input changes, then restores the prior enabled/disabled state afterward.
- This should work with both enhanced navigation form posts and forms on pages using `[ExcludeFromInteractiveRouting]`, without interfering with Blazor’s existing form submission/enhanced navigation behavior.
### Additional context
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.