加载loading效果（移动端）

 步骤：1.安装：npm add react-content-loader

            2.如果是加载中，就渲染 loading 效果

            3.加载完毕后关闭

import ContentLoader from 'react-content-loader'

const Article = () => {
  // ...
  const [loading, setLoading] = useState(true)

    if (loading) {
    return (
      // 根据当前页面结构，设计好的 loading 效果
      <ContentLoader
        speed={2}
        width={375}
        height={230}
        viewBox="0 0 375 230"
        backgroundColor="#f3f3f3"
        foregroundColor="#ecebeb"
      >
        <rect x="16" y="8" rx="3" ry="3" width="340" height="10" />
        <rect x="16" y="26" rx="0" ry="0" width="70" height="6" />
        <rect x="96" y="26" rx="0" ry="0" width="50" height="6" />
        <rect x="156" y="26" rx="0" ry="0" width="50" height="6" />
        <circle cx="33" cy="69" r="17" />
        <rect x="60" y="65" rx="0" ry="0" width="45" height="6" />
        <rect x="304" y="65" rx="0" ry="0" width="52" height="6" />
        <rect x="16" y="114" rx="0" ry="0" width="340" height="15" />
        <rect x="263" y="208" rx="0" ry="0" width="94" height="19" />
        <rect x="16" y="141" rx="0" ry="0" width="340" height="15" />
        <rect x="16" y="166" rx="0" ry="0" width="340" height="15" />
      </ContentLoader>
    )
  }

}

  // 1. 获取文章详情
  const params = useParams<{ artId: string }>()
  console.log(params)
  const [detail, setDetail] = useState<ArticleDetail>()
  useEffect(() => {
    const getDetail = async () => {
      const { data } = await getArticleDetail(params.artId)
      console.log(data)
      setDetail(data)
-   // 关闭loading
+     setLoading(false)
    }
    getDetail()
  }, [params.artId])