【LWC】轻巧的加载预显示行 UI组件 - loading-place-holder #lwc组件 #Salesforce #用户体验

轻巧的加载预显示行 - loading-place-holder

背景介绍

在加载一个数据量比较大的组件时，在元素被渲染出来之前页面上会存在一些空白区域，元素加载完成突然被渲染之后，空白区域又会被突然填满，用户体验上并不友好。因此，在设计Lightning组件的时候，为了更加良好的用户体验，我引入了预显示行。

它和官方ui库提供的 lightning-spinner的区别在于，spinner并不占位，因此在数据元素加载出来之后，仍然会造成组件空间突变的非良好体验。

效果：

在有思路之后，我们立即行动。先把基本元素给写出来，我们的目标是一个不含有任何信息的预显示行。

把预显示行分割成两部分：左和右，然后在单元格内，用粗潜灰线提示为加载中的信息内容，并分为上下两部分，上半部分的线要比下半部分的线短，这样整体看上去会比较美观。同时，在整个元素的上下部分，添加细的灰色分割线，用来提示整体行的空间位置。

下面来解构设计内容

• 分左右部分
• 粗-浅-灰线提示为内容行
• 每个部分分上下线部分
• 上部分线比下部分线短
• 每个元素的上下用细-略浅-灰提示为分割线

根据我们解构的设计元素，写出CSS部分：

.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