Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress.

A skeleton page shows the frame of the final content without the content being fully loaded. Visually, skeleton pages are grey boxes with animations to indicate loading activity.

Skeleton pages are used to create an impression of speed and reliability when an app encounters performance barriers. They provide a generic preview of the layout, which makes the app seem to load faster. This improves the overall user experience.

When to Use

Use a skeleton page with generic placeholders when

• Launching an application from the launchpad.
• Navigating from one application to another application.

Components

For placeholder loading in Fiori, we have decided to use the generic placeholder loading concept. This means that for each floorplan there is a generic placeholder that is displayed as a generic fixed page.

Available Placeholder Floorplans:

• Analytical list page
• List report
• Object page
• Overview page

Behavior and Interaction

The generic skeleton pages are visible as soon as the initial loading of an application or an app to app navigation has started when the target application is called the first time.

Behavior List Report and Object Page

In the first release, the placeholder is removed when all data is loaded. If the table has to be loaded manually, the busy indicator appears during the loading process.

Behavior Flexible Column Layout

With the flexible column layout, only the newly loaded content is visible with placeholders.

Behavior Overview Page

The placeholders are removed as soon as the first card is completely loaded and the remaining cards are loaded without content

Responsiveness

All skeleton pages are responsive and support all SAP Fiori screen sizes: small (S), medium (M), large (L), and extra large (XL).