HarmonyOS 搜索结果页中，在loading中需要加载骨架屏，咨询合理的高性能方案

@Extend(Column) 
function commonStyle(width: string, color: Resource, opacity: number) { 
 .width(width) 
 .height('100%') 
 .backgroundColor(color) 
 .opacity(opacity) 
 .borderRadius(2) 
} 
 
@Entry 
@Component 
export default struct YangTest1Page { 
 @State arr: number[] = []; 
 @State ColumnBgColor: Resource = $r('app.color.gray_C0C0C0')//C0C0C0 
 @State ColumnOpacityCom: number = 0.5; 
 @State ListOpacityCom: number = 0.5; 
 @State listItemHeight: string = '20%' 
 
 startAnimation() { 
  animateTo({ 
   duration: 600, // 动画时长 
   tempo: 0.6, // 播放速率 
   curve: Curve.EaseInOut, // 动画曲线 
   delay: 200, // 动画延迟 
   iterations: -1, // 播放次数 
   playMode: PlayMode.Alternate, // 动画模式 
   onFinish: () => { 
    console.info('play end') 
   } 
  }, () => { 
   this.ListOpacityCom = 0.1; 
  }) 
 } 
 
 build() { 
  Column() { 
   List({ initialIndex: 0 }) { 
    ForEach(this.arr, (item: number) => { 
     ListItem() { 
      Column() { 
       Row() { 
        Column().commonStyle('50%', this.ColumnBgColor, this.ColumnOpacityCom) 
        Column().commonStyle('30%', this.ColumnBgColor, this.ColumnOpacityCom) 
       }.justifyContent(FlexAlign.SpaceBetween).width('100%').height('25%') 
 
       Blank().height('8%') 
       Row() { 
        Column().commonStyle('50%', this.ColumnBgColor, this.ColumnOpacityCom) 
        Column().commonStyle('30%', this.ColumnBgColor, this.ColumnOpacityCom) 
       }.justifyContent(FlexAlign.SpaceBetween).width('100%').height('10%') 
 
       Blank().height('8%') 
       Row() { 
        Column().layoutWeight(1) 
        Column().commonStyle('30%', this.ColumnBgColor, this.ColumnOpacityCom) 
       }.justifyContent(FlexAlign.SpaceBetween).width('100%').height('10%') 
 
       Blank().height('8%') 
       Row() 
        .height('12%') 
        .backgroundColor(this.ColumnBgColor) 
        .width('100%') 
        .opacity(this.ColumnOpacityCom) 
        .borderRadius(2) 
      }.margin({ top: '4%', bottom: '2%' }) 
     } 
     .width('90%') 
     .height(this.listItemHeight) 
    }, (item: number) => JSON.stringify(item)) 
   } 
   .alignListItem(ListItemAlign.Center) 
   .listDirection(Axis.Vertical) // 排列方向 
   .divider({ strokeWidth: 1, color: $r('app.color.gray_F4F5F7') }) // 每行之间的分界线 F4F5F7 
   .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 
   .onScrollIndex((firstIndex: number, lastIndex: number) => { 
    console.info('first' + firstIndex) 
    console.info('last' + lastIndex) 
   }) 
   .scrollBar(BarState.Off) 
   .opacity(this.ListOpacityCom) 
 
   .width('100%') 
   .onAppear(() => { 
    this.startAnimation() 
   }) 
  }.width('100%').height('100%').padding({ top: 5 }) 
  .onAreaChange((oldValue: Area, newValue: Area) => { 
   const listHeight = Number(newValue.height) 
   const length = Math.round(listHeight / 120) 
   for (let i = 0; i < length; i++) { 
    this.arr.push(i) 
   } 
   this.listItemHeight = Math.floor(100 / length) + '%' 
  }) 
 } 
}