Provide a representation of UI before actual content appears on the page

[Tarun-DXC]

Is your feature request related to a problem? Please describe.
While working on SOE for complex screen consisting multiple API calls, we get the feedback that performance is not good. During investigation it was identified that there are many API calls which happen on the screen. They are used to load different sections of screen. API response time is good but the screen is taking time to load because of multiple sections

Describe the solution you'd like
A temporary animation placeholder for when a service call takes time to return data and we don't want to block rendering the rest of the UI. e.g.
Shimmer on Fluent - https://developer.microsoft.com/en-us/fluentui#/controls/web/shimmer
Skeleton on Shopify - https://polaris.shopify.com/components/feedback-indicators/skeleton-page#navigation

Describe alternatives you've considered
None. Currently we use Spinner component to show ongoing API calls

Additional context
Add any other context or screenshots about the feature request here.

Add Labels
screen rendering, performance, assure policy

[aweell]

Hi @Tarun-DXC

Thanks for reaching!

Although the use of this kind of element could change perceptually the loading time (not actually much compared with a spinner), a moderate loading time, no matter the element we use in the UI to provide feedback, is a bad user experience.

There are strategies to follow in order to change loading perception, but let's first approach the problem at its core.

Before entering in detail, I would like to understand better the context:

• If the API response time is good, what could happen when rendering the UI that could cause these performance issues? (Maybe @jsardid could help with this?)
• How complex the screen is? How many sections are loading at the same time?
• What's the current loading time?

[Tarun-DXC]

HI @aweell

Here is a sample policy summary screen https://xd.adobe.com/view/0ecc18e0-416c-408a-a472-da5351cd922a-5b9f/

This loads a snapshot of the policy where each section is its individual component. In this the vehicle coverage have to be retrieved individually per vehicle where we intend to use something like skeleton

[jsardid]

Hi @Tarun-DXC, thanks for the feedback!

We understand the requirement and it does make sense. As Alex is saying, some studies indicate a slight improvement of the loading time perception when using these skeleton components. Although this is a small improvement, we are adding a backlog item (#688) for exploring these loading patterns in future releases. Feel free to include additional information you might have, in case you think it might help us with the research.

In the meantime, you can achieve partial loading of that screen by using inline spinners inside each of the containers, instead of a unique overlay spinner for the whole application. See the "mode" prop of the slider component.