diff --git a/src/container/listContainer/index.tsx b/src/container/listContainer/index.tsx index 28f5d1d..459acd5 100644 --- a/src/container/listContainer/index.tsx +++ b/src/container/listContainer/index.tsx @@ -28,8 +28,11 @@ const ListContainer = (props) => { defaultShowNum, } = props; const timerRef = useRef(null); + const loadingStartTimeRef = useRef(null); + const skeletonTimerRef = useRef(null); - const [showNumber, setShowNumber] = useState(0) + const [showNumber, setShowNumber] = useState(0); + const [showSkeleton, setShowSkeleton] = useState(false); const userInfo = useUserInfo(); @@ -51,11 +54,35 @@ const ListContainer = (props) => { }) }, [data]) + // 控制骨架屏显示逻辑 + useEffect(() => { + if (loading) { + // 开始加载时记录时间 + loadingStartTimeRef.current = Date.now(); + + // 延迟 300ms 后再显示骨架屏 + skeletonTimerRef.current = setTimeout(() => { + setShowSkeleton(true); + }, 300); + } else { + // 加载完成,清除定时器并隐藏骨架屏 + if (skeletonTimerRef.current) { + clearTimeout(skeletonTimerRef.current); + skeletonTimerRef.current = null; + } + setShowSkeleton(false); + loadingStartTimeRef.current = null; + } + }, [loading]); + useEffect(() => { return () => { if (timerRef.current) { clearTimeout(timerRef.current); } + if (skeletonTimerRef.current) { + clearTimeout(skeletonTimerRef.current); + } }; }, []); @@ -130,8 +157,8 @@ const ListContainer = (props) => { return ( {renderList(data)} - {/* 显示骨架屏 */} - {loading && renderSkeleton()} + {/* 显示骨架屏 - 只有在 loading 超过 300ms 时才显示 */} + {loading && showSkeleton && renderSkeleton()} {/* 搜索结果较少,已为你推荐其他内容