[LWC] Lightly loading pre-display line UI components-loading-place-holder #lwcComponent#Salesforce #User Experience

Lightweight loading pre-display line-loading-place-holder

Background introduction

When loading a component with a relatively large amount of data, there will be some blank areas on the page before the element is rendered. After the element is loaded and suddenly rendered, the blank area will be suddenly filled up, which is not friendly in user experience. Therefore, when designing the Lightning component, for a better user experience, I introduced a pre-display line.

It is official and ui library offers lightning-spinnerdistinction that spinneris not occupying, so after loading the data elements out, still cause mutations in non-space components of a good experience.

effect:

After we have ideas, we act immediately. First write out the basic elements, our goal is a pre-display line that does not contain any information.

Divide the pre-displayed line into two parts: left and right, and then in the cell, use a thick gray line to indicate the content of the loading information, and divide it into two parts, the upper part and the lower part of the line The line is short, so the overall look will be more beautiful. At the same time, in the upper and lower parts of the entire element, a thin gray dividing line is added to indicate the spatial position of the overall line.

Let's deconstruct the design content below

• Divided into left and right parts
• Thick-light-grey lines indicate content lines
• Each part is divided into upper and lower parts
• The upper part of the line is shorter than the lower part of the line
• The top and bottom of each element are thin-slightly-gray tips as dividing lines

According to our deconstructed design elements, write the CSS part:

.field {
    
    
  padding: 1.5rem 1rem;
}

.border-bottom {
    
    
  border-bottom: 1px solid #d9dbdd;
}
.field-name {
    
    
  width: 30%;
  padding-right: 0.75rem;
}

.field-value {
    
    
  width:70%;
}

.left-column, .right-column{
    
    
  float: left;
  display: block;
  width: 50%;
}
.text {
    
    
  border-radius: 15rem;
  display: block;
  margin-bottom: .75rem;
  background-color: #f2f2f3;
  height: .5rem;
}
.text-shorter {
    
    
  width: 20%;
}
.text:last-child {
    
    
  margin-bottom: 0;
}
.text-secondary {
    
    
  background-color: #e9eaec;
}
.text-medium {
    
    
  width: 60%;
}
.text {
    
    
  border-radius: 15rem;
  display: block;
  margin-bottom: .75rem;
  background-color: #f2f2f3;
  height: .5rem;
}
.text-thin{
    
    height:6px;border-radius: 15rem}

In HTML, according to the design structure, write out the occupied elements:

<template>
  <div class="slds-clearfix detail-panel-root slds-card">
    <div class="left-column">
      <template for:each={rows} for:item="row">
        <div key={row.id} class="field border-bottom">
          <div class="text text-primary text-shorter text-thin"></div>
          <div class="text text-secondary text-medium text-thin"></div>
        </div>
      </template>
    </div>
    <div class="right-column">
      <template for:each={rows} for:item="row">
        <div key={row.id} class="field border-bottom">
          <div class="text text-primary text-shorter text-thin"></div>
          <div class="text text-secondary text-medium text-thin"></div>
        </div>
      </template>
    </div>
    </div>
</template>

Noted that in order to implement a custom show the number of lines, we wrapped up in a row on each element of for:eachthe iterative property, in the js file, we need to implement this cycle:

import {
    
     LightningElement,api } from 'lwc';

export default class LoadingPlaceHolder extends LightningElement {
    
    
  @api
  rowNumber
  get rows() {
    
    
    const number = (!!this.rowNumber ? this.rowNumber : 1)
    var row = {
    
    }
    var rows = []
    for(let i = 0; i < number; i++) {
    
    
      row.id = i
      rows.push(row)
    }
    return rows
  }
}

Therefore, when we want to use the pre-loaded assembly line, as long as the property row-numberis set to a few lines.

Usage example

In one of my components, I want to display 3 preload lines before the component finishes loading, then my component will call it like this:

<template if:false={loaded}>
    <c-loading-place-holder row-number="3"></c-loading-place-holder>
</template>
<template if:true={loaded}>
    <!-- 组件内容 -->
</template>

A loadedparameter control, prior to loading the data, the display of three lines preload line.

In js file, define the loadedparameters, and the hook function, the control value of this variable:

@track loaded = false
@wire(getRecords, {
    
    }) 
wiredRecord({
    
    error, data}) {
    
    
	if (data) {
    
    
		// ...
		this.loaded = true
	}
}

Complete code

The complete code is already on my github , you can try it if you are interested.