PageLoader

Usage

• Use PageLoader for large loading contexts where an application context, full page, or large panel has no content to show yet — boot sequences, route transitions, or panels loading large datasets.
• Use Spinner instead when the indicator needs to sit inline with text or inside a smaller content area — PageLoader is built from a Spinner internally, don't nest another one inside it.
• Use SkeletonShape or SkeletonText instead when the loading layout should reserve space matching the predictable structure of the content that's loading, such as a Table or Card.

Appearance

• Keep the default image (imageSrc unset) — the Customer.io logo — for full-page and app-level loads.
• Set a custom imageSrc to reinforce a more specific loading context, such as a particular product or workspace.
• Set imageSrc={null} to hide the image in compact loading areas — modals, drawers, or list panels.
• Set imageWidth and imageHeight together when resizing the image, and preserve its original aspect ratio so it isn't distorted.

Content

• Write the label as a short, present-tense phrase ending in an ellipsis (e.g. "Redirecting…").
• Default to "Loading…" when there's no more specific context to give.
• Never write a full sentence for label.

Implementation Notes

• imageWidth and imageHeight are numbers (pixels), not strings.
• imageAlt sets the image's alt text (default ''); not covered in the design doc.
• PageLoader takes no children/yielded content — the image and label are controlled entirely through props (imageSrc, imageWidth, imageHeight, imageAlt, label).
• Ember's PlumaPageLoader signature declares a default block, but the component doesn't render any yielded content — pass the same props as args (@imageSrc, @imageWidth, @imageHeight, @imageAlt, @label) instead of yielding.
• Both frameworks support the polymorphic as prop (inherited from Box) to change the root element tag.