Loading & LoadingPanel

SpartanFX offers two loading indicators: Loading, a global overlay that's reference-counted so overlapping async work behaves correctly, and LoadingPanel, which shows a loading block scoped to a specific panel/region.

Import

import { Loading, LoadingPanel } from '@spartanfx/react';

Global overlay

Mount Loading with loading={true} to show the overlay. It keeps an internal counter: each active loader increments it, and the overlay only clears when the count returns to zero — so two concurrent operations won't hide the spinner prematurely.

function Saving({ isSaving }: { isSaving: boolean }) {
  return <Loading loading={isSaving} message="Saving your changes…" />;
}

• loading (required) — whether this loader is active.
• message — text shown in the overlay; updating it while active changes the message in place.

Imperative control

Prefer a non-component API? SpartanFX also exports setLoading / removeLoading helpers that drive the same counted overlay from anywhere.

Panel-scoped loading

LoadingPanel shows a loading block within a region rather than over the whole app. Toggle loading, or drive it imperatively via panelBlockRef.

<LoadingPanel loading={isFetching}>
  <ReportContent />
</LoadingPanel>

Key props

Loading

Prop	Type	Default	Notes
loading (required)	boolean	—	Whether the global overlay is shown (reference-counted).
message	string	''	Overlay message.

LoadingPanel

Prop	Type	Default	Notes
loading	boolean	false	Show the loading block.
panelBlockRef	Ref<LoadingPanelBlockHandle>	—	Imperative show/remove control.

See the full generated reference: Loading ↗ · LoadingPanel ↗.

See also

• Components overview