Introduction to Content Loading

• Guiding Principles
  • Content Loading Elements
• Best Practices
• Implementing Progressive Images

Guiding Principles

Content loading elements and progressive loading techniques provide information about a page’s structure while the user waits for it to load. Aligning with the guiding principles of Spark, this gives users immediate feedback and improves the perception of site and application loading times, particularly on data-heavy applications.

Content Loading Elements

---

Best Practices

1 Show the appropriate content loading element for the situation

• Skeleton Components work well when loading large amounts of new data. However, applications should display content immediately when it’s cached and available or when you know it will load quickly.
• Use Progress Indicators when reloading or refreshing content asynchronously into containers.
• Display Skeleton Components only after checking to ensure a user has access to the page content, like a screen meant for users with administrator privileges.

2 Use animations to enhance the experience

• Animate Skeleton Components into view to improve perceived performance. This occupies users’ attention while they wait for content to download.
• Sequence animations for multiple Skeleton Components using a staggered approach, starting at the top of the page.
• Do not sequence animations for the individual pieces that make up a Skeleton Component.

3 Provide clear wayfinding and content queues

• Display available page titles and section headers immediately to familiarize users with the precise content they can expect to see once the page finishes loading.
• Match Skeleton Content as closely as possible to the type of content that will ultimately display.
• Match the dimensions of Placeholder Images to the dimensions of the full-sized images that will ultimately display.

4 Keep Skeleton Components simple

• Limit repeated elements within Skeleton Components, like Panel Menu lists or Table rows, to three examples. This gives a simplified overview of the page structure and allows more elements to display while the page loads.
• Skeleton Components can have smaller heights than the components they represent, to allow for more content to display on the screen while it loads.
• For content that yields a potentially unlimited number of results, like Carousels and Lazy Load, repeated elements may be increased to fit the container. Use a gradient to fade results to white, to indicate an indefinite number of results.

---

Implementing Progressive Images

There are a number of ways to approach how you implement progressive images, but here are some guidelines to consider:

• Always display full-sized images immediately when they’re cached and available.
• Initially, create a smaller-sized and lower-quality version of the image to display something quickly and improve perception of download times.
• Display the low-quality image with the same dimensions as the full-sized image and apply a CSS blur of 12px.
• Once the full-sized image finishes downloading, fade out the low-quality image using a duration of 250ms, revealing the full-sized image behind it.