# 应用加载页面时有短暂的白屏

#### 问题现象

进入应用某个页面，需等待数据请求完成，在请求完成前，页面一直显示空白内容，导致页面白屏近2s后才会加载出页面内容。

#### 背景知识

*   骨架屏用于在数据未完全加载之前占位页面，减少用户等待焦虑，加强用户体验。
*   在数据源保持不变的场景中，数据源可以直接采用基本数据类型。例如，在页面加载状态时，可以使用骨架屏列表进行渲染展示。
*   可以使用linearGradient+translate +animation+onAppear实现骨架屏的闪光效果。

#### 问题定位

*   排查是否有使用linearGradient属性，设置骨架屏的渐变背景色。
*   排查是否使用translate属性、animation属性以及onAppear事件，实现骨架屏的加载动画。

若上述功能均未实现，则判断未使用骨架屏功能。

#### 分析结论

没有使用骨架屏功能，导致应用加载的页面白屏2s左右才加载出内容，体验不好，造成等待焦虑。

#### 修改建议

进入应用后，需要等待加载完成的页面都建议使用骨架屏功能。也可以参考骨架屏示例。

核心代码如下：

```
@Entry
@Component
struct SkeletonExample {
  @State translateX: string = '-100%';
  widthValue: number = 28;
  heightValue: number = 100;

  build() {
    Column({ space: 10 }) {
      Stack() {
        // 背景
        Text()
          .height(this.widthValue)
          .width(this.heightValue)
          .backgroundColor('rgba(220,220,220,1)')

        // 动画
        Text()
          .height(this.widthValue)
          .width(this.heightValue)
          .translate({ x: this.translateX })
          .onAppear(() => {
            this.translateX = '100%';
          })
          .animation({
            duration: 1500,
            iterations: -1
          })
          .linearGradient({
            angle: 90,
            colors: [
              ['rgba(255,255,255,0)', 0],
              ['rgba(255,255,255,1)', 0.5],
              ['rgba(255,255,255,0)', 1]
            ]
          })
      }

      Stack() {
        // 背景
        Text()
          .height(this.widthValue)
          .width(this.heightValue)
          .backgroundColor('rgba(220,220,220,1)')

        // 动画
        Text()
          .height(this.widthValue)
          .width(this.heightValue)
          .translate({ x: this.translateX })
          .onAppear(() => {
            this.translateX = '100%';
          })
          .animation({
            duration: 1500,
            iterations: -1
          })
          .linearGradient({
            angle: 90,
            colors: [
              ['rgba(255,255,255,0)', 0],
              ['rgba(255,255,255,1)', 0.5],
              ['rgba(255,255,255,0)', 1]
            ]
          })
      }

      Stack() {
        // 背景
        Text()
          .height(this.widthValue)
          .width(this.heightValue)
          .backgroundColor('rgba(220,220,220,1)')

        // 动画
        Text()
          .height(this.widthValue)
          .width(this.heightValue)
          .translate({ x: this.translateX })
          .onAppear(() => {
            this.translateX = '100%';
          })
          .animation({
            duration: 1500,
            iterations: -1
          })
          .linearGradient({
            angle: 90,
            colors: [
              ['rgba(255,255,255,0)', 0],
              ['rgba(255,255,255,1)', 0.5],
              ['rgba(255,255,255,0)', 1]
            ]
          })
      }
    }
    .width('100%')
    .height('100%')
  }
}
```