Skeleton screen

Recently, there is a need for skeleton screen from time to time in the project, so I took some time to investigate the skeleton screen scheme. There have been a lot of skeleton screen practice, and many people have introduced their own scheme. Here according to personal understanding to do a summary and classification, to share with you.

About Skeleton Screen (Introduction)

The skeleton screen is to show the user the general structure of the page before the data is loaded, and then render the page after the request data is returned to supplement the data content that needs to be displayed. Commonly used for article lists, dynamic list pages, and other comparative rules of the list page. There are applications in many projects: EX: Ele. me H5, Zhihu, Facebook and other websites. Here’s an example:

Two kinds of USES

A description of its use is given in the introduction, but it can still be further subdivided:

  1. Loading as a route switch in a SPA is used in conjunction with the lifecycle of the component and the timing of the ajax request return.
  2. Optimized as the first screen rendering.

Category I use

In the first category, you need to write your own skeleton screen. Two mature and easy to customize SVG components are recommended to customize skeleton screen

  • react-content-loader
  • vue-content-loader

Render as the first screen (automated solution)

This scheme is a set of schemes summarized by Ele. me in the practice of skeleton screen:

  • The skeleton screen’s DOM structure and CSS are injected below the nodes in the template after the offline generation is built.
  • Principle Related to the implementation principle of elEME skeleton screen plug-in
  • Project address: Page-skeleton-webpack-plugin
  • Points to note when using:
  1. CssUnit configuration: need to use adaptive units, according to the selection range given in the document, directly usepxIt’s not going to be the right proportion
  2. Puppeteer is about 80 megabytes long and may not be downloaded all at once.
  • Principle:
Puppeteer controls Headless Chrome on the server to open the page that needs to generate skeleton screen in development. After the page loading and rendering is completed, the existing elements are covered by overlapping pattern by deleting or adding elements in the page on the premise of retaining the page layout style. This allows you to hide images and text without changing the layout of the page, overlay them with styles, and make them appear as gray blocks. Then extract the modified HTML and CSS styles, and you have a skeleton screen.Copy the code

Other options

Used in combination with SSR render/prerender:

  1. The skeleton screen component is prepared in advance by SSR render parsing into HTML files (in addition to the need to write their own process is similar to the above automation scheme) reference article

  2. The skeleton screen component written in 1 can be replaced by an image (SVG). Or a designer.

Skeleton screen for applet

  1. There is no concept of pre-rendering, but you can still write your own skeleton screen components and put them on the page and update the page when the asynchronously requested data comes back.

Spread the word

This article is published in Front of Mint Weekly. Welcome to Watch & Star.

Welcome to the discussion. Give it a thumbs up before we go. ◕ ‿ ◕. ~