React 实现骨架屏组件

思路其实就是：当数据未返回的时候，渲染骨架屏组件，数据返回之后，渲染真正的组件

| - skeletons
	  | - OrderSkeletons
	  	  | - index.js
	  	  | - index.less
	  | - index.js

index.js

export { default as OrderSkeletons } from './OrderSkeletons';

index.js

import React, { useState, useEffect } from 'react';

import './index.less';

export default function (props) {
  const [state, setState] = useState(Array(3).fill(1));

  useEffect(() => {

  }, [])

  return (
    <div className='order-skeletons'>
      {state.map(item => (
        <div className='order-item' key={item}>
          <div className={'skeletons left'}></div>
          <div className='center'>
            <div className={'skeletons title'}></div>
            <div className={'skeletons price'}></div>
            <div className={'skeletons time'}></div>
          </div>
          <div className={'skeletons pay'}>
          </div>
        </div>
      ))}
    </div>
  )
}

index.less

@import '../../assets/mixin.less';

.order-skeletons {
  .order-item {
    .flex(row, flex-start);
    margin-bottom: 12px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    .left {
      width: 120px;
      height: 80px;
    }
    .center {
      flex: 1;
      margin: 0 12px;
      .price {
        margin: 12px 0;
        width: 50px;
      }
      .time {
        width: 120px;
      }
    }
    .pay {
      margin-right: 4px;
      width: 70px;
      height: 30px;
    }
  }
}


/* Skeletons效果 */
.skeletons {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 20px;
  background-color: #ededed;
}
.skeletons:empty::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(216, 216, 216, 0.253), transparent);
  animation: loading 1.5s infinite;
}

@keyframes loading { /* 骨架屏动画 */
  from {
    left: -100%;
  }
  to {
    left: 120%;
  }
}

mixin.less

.flex(@direction:row, @justify:center, @align:center){
  display: flex;
  flex-direction: @direction;
  justify-content: @justify;
  align-items: @align;
}

组件用法

import { OrderSkeletons } from '@/skeletons'

export default function(props){
  const [state, setState] = useState()

  useEffect(() => {

  }, [])
  console.log(props)

  return (
    <div>
      {isEmpty(props?.orders) ?
        <OrderSkeletons toast /> :
        <div className='tab-lists'>
          //....
        </div>
      }
    </div>
  )
}