PageLoader
PageLoader communicates that a process is currently running on a page-level context.
Anatomy
| # | Required | Element | Description |
|---|---|---|---|
| 1 | Container | Wraps the loader content and centers it within the full width and height of its parent. | |
| 2 | Image | A branding or illustrative image shown above the Spinner. Defaults to the Customer.io logo, and can be replaced or hidden. | |
| 3 | Spinner | Indicates the loading process and displays a label describing what's loading. |
Guidelines
When to use
PageLoader communicates that an application context, full page, or large panel has no content to show while its data loads. Use PageLoader for larger loading contexts such as boot sequences, route transitions, or panels with large datasets.
PageLoader vs. Spinner and Skeleton
PageLoader, Spinner, and Skeleton are all components that communicate a loading state. However, it's important to understand the subtle differences as they are not fully interchangeable:
- PageLoader fills its entire container to indicate that a full page, panel, or app shell has no content or data to show yet, pairing a branded image with a Spinner.
- Spinner is a smaller, general-purpose indicator that can sit inline with text or inside any content area. This component helps make up the PageLoader.
- Skeleton components (SkeletonShape and SkeletonText) reserve space that matches the predictable layout of the content that's loading, such as a Table or Card.
Best practices
Using images
Hide the image in more compact loading areas, such as modals, drawers, or list panels.
Appearance
Image
An image can be added to the PageLoader to better visually emphasize the scope of the page. The image defaults to the Customer.io logo. Replace it with a custom image for a more specific loading context or hide it entirely so only the Spinner and label show.
The default Customer.io logo reads as branding for full-page and app-level loads.
A custom image reinforces a more specific loading context, such as a particular product or workspace.
Hiding the image keeps the loader compact for modals, panels, and other scoped areas.
Size
The image renders at its natural dimensions, but the width and height can be separately adjusted with component props. Be consistent in maintaining aspect ratio so the image isn't distorted.
The image renders in its natural size.
Image width and height can be changed to fit the loading context and maintain its original aspect ratio.
Content
Label
When writing custom loading text, be clear to set expectations for what process is running. Keep the phrase short and present-tense and end with an ellipsis.
Default to "Loading…" when the PageLoader has no more specific context to give.