Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Why a skeleton screen?

When the local preview is about to fly, but the server is always dragging its feet? Isn’t it because the first time a user visits a site, the resources are loaded from the server, and the subsequent access to the API takes time, although not all of the resources are re-downloaded?

At this point, some images and static text resources are loaded, but the main data is still waiting for the API to access, so there needs to be some filling in the page to give the user visual feedback on the loading.

Of course, loading animations is still common, followed by the increasingly popular skeleton screen.

A simple example is that skeleton screens are most common in apps, but there are also many applications in web pages, such as gold-digging article pages. Although the nuggets article page load pretty fast, but should be considering the network fluctuation situation, so made skeleton screen.

Under the condition of good network, hand speed can also be screenshot.

Let’s implement a custom skeleton screen using Element-Plus, Vue3’s Element component library.

<div class="content">
  <! Content skeleton screen -->
  <el-skeleton style="width: 100%" direction="vertical" alignment="flex-start" :loading="loading" animated class="content-skeleton">
    <template #template>
      <div class="avatar" style="display: flex; align-items: center;">
        <el-skeleton-item variant="circle" 
        style="margin-bottom: 12px; width: 48px; height: 48px; background-color: #aaa;" />
        <div style=" display: flex; flex-direction: column; position: relative; bottom: 6npmpx; margin-left: 8px;">
          <el-skeleton-item variant="text" style="width: 80px; margin-bottom: 8px;" />
          <el-skeleton-item variant="text" style="width: 50px;" />
        </div>
      </div>
      <el-skeleton-item variant="rect" style="width: 100%; height: 240px; background-color: #aaa;" />
      <div style="padding: 12px 14px 0 0">
        <el-skeleton-item variant="h1" style="width: 50%;" />
        <el-skeleton-item variant="text" style="margin-top: 8px; margin-right: 16px" />
      </div>
    </template>
  </el-skeleton>
</div>
Copy the code

The renderings are as follows

Can be said to be a perfect copy of the Nuggets skeleton screen.

When the data request is completed, the switch can be completed by controlling the Loading Boolean value.