janareis commented 5 years ago

Proposal: Content Placeholder UI

Summary

A placeholder UI shows the skeleton of the UI by using gray boxes that mimic the actual UI but it is there temporarily until the UI gets loaded. This is most commonly seen in a list, but need not be exclusive to list items.

Facebook, for example, uses a fancy shimmer effect (link).

Another of the many examples where this is seen is Office's Delve app.

Rationale

Currently, we don't a control shows that a specific part of the UI is loading. We use the spinner when the whole page is processing. The placeholder UI is a more modern pattern apps are currently using as a way to show a specific part of the UI loading in an engaging way.

Important Notes

Open Questions

Is there an experience outside of a collection/list where the content placeholder pattern would be valuable for your app?
Is the UI shown for the placeholder content something you'd need/expect to customize?

jevansaks commented 5 years ago

@micahl / @janareis can you add some more context here? (you can edit the description to provide it)

janareis commented 5 years ago

Scenario: A user comes to Company Portal desktop app to download the company apps the IT of her organization assigned to her so she can be productive at work. Once she launches the app, she would land on the homepage and see the apps and devices that are currently managed and available to her. She would click on the apps menu item, to find all 10 apps that should be using at work. The page doesn't load immediately, it shows a temporary placeholder screen while the apps are been retrieved. After 3 seconds of this animation transitioning from placeholder UI and actual apps, she can see all list of apps available to her.

Problem: We have app categories (featured, recently published, productivity, etc) that by its nature requires a different amount of work from the server so they all load with different time frames. Instead of using an empty page with spinner for the whole page going on and on, we can show a placeholder screen that gives a sense of the UI pieces users are going to see. The same things apply to the "All apps" page where app tiles load in a different time frame.

Goal: The goal of this feature is to provide users with a UI pattern that can decrease the sense of long load time, and has the potential to add delight to the user experience.

Succes criteria: This feature should work as a temporary state, so it is ideal for this feature to take 4 seconds total while the actual screen UI loads. The animation shows the transition between the placeholder UI and the actual app screen tiles. For the mockup animation, I'm using – Dissolve transition, delay:200ms, easy out:200ms.

michael-hawker commented 5 years ago

Would this be a separate control that can be configured to show different placeholders?

OR

Is it a property/effect that can be applied on top of an existing XAML structure to mimic the existing content that will be filled in when loaded with the placeholder loading content?

mdtauk commented 5 years ago

Rather than being a control, could this not be something attached to existing panels and views. When the children is Empty or Null - then it displays the content from this control.

It's only purpose would be to display it's XAML content or not be loaded at all.

Now if this is used in the empty panel, it would display when no items are found - like Inbox Zero or No Search Items found etc. But when used on a data or list item template, it will use a Foreground and Background property to colour its path/shape contents - with perhaps a brush animation - and will unload when the contents get loaded from datasource.

micahl commented 5 years ago

Good questions/comments on things that would need to be considered and for which I don't have answers yet. :) I added some open questions to the proposal for discussion that I think might help inform a design.

gascardi commented 5 years ago

@micahl Testing app lifecycle events when debugging an app (this example: Company Portal), it appears that some form of this already exists. (@janareis FYI)

When I am debugging and suspend the app:

Lists transform to the following:

Resumed: Suspended:

But other elements (like text) just don't appear to have a placeholder.

mdtauk commented 5 years ago

Ideally instead of this being its own control in the visual tree, there would be a "placeholder" Xaml tag placed on elements, which would display whilst the full items are prepared and inserted into the Tree.

This means there is no need to make separate templates for the placeholder items, as well as for the actual item template.

A property for displaying the loading shimmer, and transitions for when the content has loaded, like fade ins for text and images.

Could this control/behaviour also support Empty content scenarios, like No Search Results Found, or Yay!, No Unread Emails ?

This should probably not affect the Headers for a DataGrid or Tabular layout.

As well as loading content, could this also be useful for refreshing lists?

Fabric Web has an equivalent control called Shimmer Office's Fabric Web - Shimmer

matthew4850 commented 4 years ago

This would be really useful, I hope this gets done soon!

michael-hawker commented 3 years ago

While it's slightly different (no animation), we do have the ImageEx control in the Toolkit which does some placeholder behavior. It's also just for images though. Would be curious if there are things to transfer though or to handle multiple types of scenarios with this type of component?

mdtauk commented 3 years ago

While it's slightly different (no animation), we do have the ImageEx control in the Toolkit which does some placeholder behavior. It's also just for images though. Would be curious if there are things to transfer though or to handle multiple types of scenarios with this type of component?

Any solution could be at the rendering level. Boxes and Lines in place of text, images, etc. The renderer displays the placeholder until the content loads.

Instead of adding and removing items from the visual tree.