前端骨架屏（Skeleton Screen）是一种优化页面加载体验的技术，通常在内容加载时展示一个简易的占位符，避免用户看到空白页面。骨架屏通过展示页面结构的骨架样式，让用户有页面正在加载的感觉，而不是等待内容加载完毕。常见的骨架屏实现方式有两种：使用 CSS 动画和使用 JavaScript 组件。

基本实现步骤：

1. 设计骨架结构
   骨架屏的结构应该根据你页面的内容来设计，常见的有文本框、头像、图片等元素。可以使用灰色或浅色背景来模拟真实内容的占位。
2. 使用 CSS 实现动画效果
   使用 @keyframes 来创建渐变动画效果，使骨架屏看起来更流畅。
3. 用 React 组件动态渲染骨架屏
   使用 React 或其他框架，基于数据加载状态（如 loading）来控制显示骨架屏还是实际内容。

例子：用 React 和 CSS 实现一个简单的骨架屏

1. 创建骨架屏组件

import React from 'react';
import './Skeleton.css';

const Skeleton = () => {
  return (
    

      

      

      

      

    
  );
}

export default Skeleton;

2. 添加 CSS 样式

.skeleton-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-avatar {
  width: 60px;
  height: 60px;
  background: #e0e0e0;
  border-radius: 50%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

.skeleton-text {
  width: 100%;
  height: 20px;
  background: #e0e0e0;
  border-radius: 4px;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

.skeleton-button {
  width: 120px;
  height: 36px;
  background: #e0e0e0;
  border-radius: 6px;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

@keyframes skeleton-loading {
  0% {
    background: #e0e0e0;
  }
  50% {
    background: #f0f0f0;
  }
  100% {
    background: #e0e0e0;
  }
}

3. 使用骨架屏组件

在你加载数据时，使用骨架屏作为占位符，直到数据加载完毕。

import React, { useState, useEffect } from 'react';
import Skeleton from './Skeleton';

const UserProfile = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setData({
        avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
        name: 'John Doe',
        bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      });
    }, 2000); // 模拟延迟加载
  }, []);

  return (
    

      {data ? (
        

          
          
{data.name}
          
{data.bio}
        
      ) : (
        
      )}
    
  );
};

export default UserProfile;

其他优化

• 骨架屏类型： 灰度骨架屏：展示灰色或其他单色块，不显示内容。 内容骨架屏：以实际内容的格式展示占位符，如模拟列表、文章的标题和段落。
• 库支持：如果想要一个更精细的骨架屏，可以使用一些现成的库，比如 react-loading-skeleton 或 @mui/material 自带的骨架屏组件。

参考库

• react-loading-skeleton: 提供了简单的骨架屏组件，支持自定义样式和动画效果。
• @mui/material Skeleton: Material UI 的骨架屏组件，适用于 Material Design 风格的应用。

这样可以大大提升用户体验，避免长时间等待内容加载时的空白页面。你目前有在做这个功能吗？