htmx-loading-overlay-partial

name	htmx-loading-overlay-partial
description	Safely extract repeated HTMX filter loading overlays into a shared Razor partial without changing page contracts.
domain	frontend
confidence	high
source	earned

Context

Use this when several Razor Pages repeat the same loading overlay structure around HTMX filter forms, but their request wiring is already stable and should not be refactored broadly.

Patterns

• Keep each page's existing hx-indicator id and the surrounding position-relative filter container.
• Move the repeated spinner body markup into Pages/Shared/Components/_LoadingSpinner.cshtml.
• Pass page-specific copy through the partial model so each screen keeps its existing loading message without duplicating spinner markup.
• Keep the page-owned overlay wrapper (id="loading-indicator", class="htmx-indicator loading-overlay") in place for the first safe slice.
• If you want a shared filter-row foundation, add only extra classes that sit beside existing Bootstrap classes.
• Skip pages that do not already have loading-overlay behavior; adding a new overlay is a contract change, not a primitive extraction.

Examples

• Pages/Stats/Batting.cshtml
• Pages/Stats/Pitching.cshtml
• Pages/Awards/Index.cshtml
• Pages/Postseason/Index.cshtml
• Pages/Salaries/Index.cshtml
• @await Html.PartialAsync("Components/_LoadingSpinner", "Loading ...")

Anti-Patterns

• Do not repoint hx-target, hx-indicator, or hx-push-url while extracting the partial.
• Do not fold modal, search host, pagination, or alphabet-nav behavior into the same slice.
• Do not introduce a new loading overlay on pages like Hall of Fame unless the task explicitly includes that behavior change.