skills.rest
syncfusion
syncfusionOFFICIAL
Explore all skills by this author →
Website𝕏@SyncfusionGitHub

syncfusion-blazor-toolkit-notifications

Implement SfSpinner loading indicators and overlay patterns in Blazor applications.

19|8|Updated May 12, 2026
Search Tags:#accessibility#async#syncfusion#blazor#overlay#spinner#loading indicator
One-click install
npx skills add https://github.com/syncfusion/blazor-toolkit --skill syncfusion-blazor-toolkit-notifications-syncfusion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: syncfusion-blazor-toolkit-notifications
Source: https://github.com/syncfusion/blazor-toolkit/tree/main/.github/skills/syncfusion-blazor-toolkit-notifications
Command: npx skills add https://github.com/syncfusion/blazor-toolkit --skill syncfusion-blazor-toolkit-notifications-syncfusion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Syncfusion.Blazor.Toolkit, and includes references (resource) components.

What problem does it solve? Blazor developers often struggle to show correct loading feedback during async operations: spinners render after the await completes, visibility bindings cause re-render storms, overlays fail to lock body scroll, and screen readers never announce the busy state. This Skill provides the rules, patterns, and reference docs to implement the Syncfusion Blazor Toolkit SfSpinner component correctly. ## Core Features & Use Cases - Visibility and lifecycle control: Correct use of @bind-Visible, VisibleChanged, and cancelable OnOpen/OnClose events without re-render storms. - Overlay composition patterns: Full-page, region, form-submission, and modal overlays with z-index discipline, focus management, and JS-interop body scroll lock. - Accessibility compliance: aria-live label announcements, role="alert" wrappers, and WCAG 2.1 AA guidance for loading indicators. - Use Case: While submitting an EditForm, render a form-level overlay with SfSpinner, force StateHasChanged before the await so the overlay paints immediately, disable the submit button, and announce "Submitting form..." to screen readers. ## Quick Start Add a Syncfusion SfSpinner overlay to my Blazor EditForm that shows "Saving..." during an async submit and hides when the save completes.

Frequently Asked Questions about syncfusion-blazor-toolkit-notifications

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I show a loading spinner during form submission in Blazor?▼

Bind SfSpinner with @bind-Visible to a boolean flag, set it true in the submit handler, call InvokeAsync(StateHasChanged) before the await so the overlay paints immediately, then reset the flag in a finally block. Place the spinner in a sibling overlay div, not inside the submit button.

How do I create a full-page loading overlay with SfSpinner?▼

Wrap SfSpinner in a div with position: fixed, inset: 0, a semi-transparent background, and a high z-index such as 9000. Add role="alert" and aria-busy="true" on the wrapper for screen readers, and use JS interop to lock body scroll if needed.

Does SfSpinner work in Blazor Static SSR render mode?▼

SfSpinner requires an interactive render mode (Server, WebAssembly, or Auto on .NET 8+). In Static SSR, prefer the built-in [StreamRendering] attribute on the page, or use element-level overlays without body scroll lock since JS interop is unavailable pre-interactivity.

Why is my Blazor spinner stuck open or causing re-render loops?▼

This happens when Visible, @bind-Visible, and VisibleChanged are combined on the same component, creating conflicting two-way bindings. Pick exactly one approach, typically @bind-Visible="@_busy", and remove the redundant bindings.

When should I use SfDialog instead of SfSpinner?▼

Use SfDialog with IsModal="true" when you need user confirmation or input, such as an "are you sure?" prompt. SfSpinner only indicates background processing and cannot gate user decisions; combine them by showing the spinner after the dialog confirms.

Related Skills

Explore More Software Engineering Skills→
syncfusionsyncfusion
4

syncfusion-blazor-common

Configure Syncfusion Blazor projects with NuGet packages, services, and localization.

Official
Intermediate
graphifgraphif
4.4k

ui

Provides promise-based dialog and toast notification components built on shadcn/ui.

Official
Basic
coastdigitalgroupcoastdigitalgroup
2

accessible-modal-dialog

Implement accessible modal dialogs with focus trapping and ARIA attributes.

Official
Intermediate
dotnetdotnet
5.3k

fetch-and-send-data

Fetch and send data in Blazor components across Server, WebAssembly, and Auto render modes.

Official
Advanced