AppLoader

A full-screen loading overlay shown while the application is initialising (e.g., fetching config, resolving auth). It renders a centred spinner with the Xocialive brand mark.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { AppLoader } from "@xocialive/ui-components";

Usage

if (isInitialising) {
  return <AppLoader />;
}

return <App />;

Props

Prop	Type	Default	Description
message	string	—	Loading message displayed below the animation
fullScreen	boolean	false	When true, renders a full-viewport overlay with backdrop blur
size	"small" | "medium" | "large"	"medium"	Controls the animation dimensions
animationData	object	Built-in Lottie	Custom Lottie animation JSON to replace the default spinner
sx	SxProps<Theme>	—	Root element style overrides

See also

• ConfigLoader — variant specifically for configuration loading states
• Loadable — HOC for lazy-loaded route components
• DataContainer — inline loading state within page sections