dotnet / dotnet/aspnetcore

[Blazor SSR] Add built-in navigation and form submission indicators

Open
#65,250 0 comments 0 reactions 0 assignees View on GitHub
area-blazor
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., `

Submitting...
`).
- 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.