如何实现点击分页按钮时显示Skeleton，3秒后自动隐藏？

问题场景 #

当前代码仅在页面初始加载时显示Skeleton占位，点击分页组件切换内容时，Skeleton不再触发显示，需要实现每次分页切换都显示Skeleton，3秒后自动切换为CardMedia。

解决方案 #

核心思路是：在分页切换时重置loading状态为true，同时启动定时器延迟3秒将其设为false，并做好定时器的清理避免内存泄漏。

1. 调整状态与工具函数

添加useRef保存定时器ID，抽离统一的loading重置逻辑：

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

// 状态定义
const [loading, setLoading] = useState(true);
const [currentpage, setCurrentpage] = useState(1);
// 用于保存定时器ID，清理冗余定时器
const timerRef = useRef(null);

// 统一处理loading重置与定时器逻辑
const resetLoading = () => {
  setLoading(true);
  // 清理之前未执行的定时器，避免状态混乱
  if (timerRef.current) {
    clearTimeout(timerRef.current);
  }
  // 3秒后关闭loading
  timerRef.current = setTimeout(() => {
    setLoading(false);
  }, 3000);
};

2. 初始加载触发逻辑

在组件挂载时调用resetLoading，同时在卸载时清理定时器：

useEffect(() => {
  resetLoading();
  // 组件卸载时清理定时器，防止内存泄漏
  return () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  };
}, []);

3. 修改分页切换函数

在分页切换时调用resetLoading，触发Skeleton显示：

const handleChange = (event, value) => {
  setCurrentpage(value);
  // 切换分页时重置loading
  resetLoading();
};

// 分页组件代码不变
<Pagination
  count={Math.ceil(Myjson.length / postsPerpage)}
  onChange={handleChange}
/>

4. 显示逻辑保持不变

原有的Skeleton与CardMedia切换逻辑无需修改：

{loading ? (
  <Skeleton
    variant="rectangular"
    width={308}
    height={420}
    animation="wave"
  />
) : (
  <CardMedia
    sx={{ height: 420 }}
    image={item.itemMainPic}
    title="green iguana"
  />
)}

关键说明 #

• 抽离resetLoading函数，统一处理初始加载和分页切换的loading逻辑，避免代码重复
• 使用useRef保存定时器ID，防止多次切换分页时产生多个定时器，导致loading状态异常
• 组件卸载时清理定时器，避免内存泄漏问题

内容的提问来源于stack exchange，提问作者daan