Skip to main content

AppShield

AppShield wraps your application and handles start-up: it initializes the SharePoint context (PnPjs) and shows a loading state until everything is ready, then renders your children. Drop in your own loading component or hook into loading-state changes when you need a branded experience.

SPFx component

Imported from @spartanfx/react/spfx; typically given a PnPjs SPFI and the SPFx webPartContext.

When to use​

  • The outermost wrapper of an SPFx web part or Code App that must wait on SharePoint before rendering.
  • Centralize app initialization and the "still loading" experience in one place.

Import​

import { AppShield } from '@spartanfx/react';

Basic usage​

Wrap your app; AppShield shows its loading state until ready.

<AppShield sp={sp} webPartContext={context}>
  <MyApp />
</AppShield>

Custom loading & callbacks​

<AppShield
  sp={sp}
  webPartContext={context}
  customLoadingComponent={<BrandedSpinner />}
  onLoadingStateChanged={(loading) => setBusy(loading)}
>
  <MyApp />
</AppShield>

Key props​

PropTypeNotes
spSPFIInitialized PnPjs instance.
webPartContextWebPartContextSPFx context.
customLoadingComponentJSX.ElementYour own loading UI (replaces the default modal).
onLoadingStateChanged(loading) => voidReact to loading changes (disables the default animation).
customContextanyOptional app-specific context to thread through.

See the full generated reference: AppShield API ↗.

See also​