修复 骨架屏 小于多少ms 不用显示

src/container/listContainer/index.tsx

@@ -28,8 +28,11 @@ const ListContainer = (props) => {
     defaultShowNum,
   } = props;
   const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const loadingStartTimeRef = useRef<number | null>(null);
+  const skeletonTimerRef = useRef<NodeJS.Timeout | null>(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 (
     <View className="listContentWrapper" style={style}>
       {renderList(data)}
-      {/* 显示骨架屏 */}
+      {/* 显示骨架屏 - 只有在 loading 超过 300ms 时才显示 */}
-      {loading && renderSkeleton()}
+      {loading && showSkeleton && renderSkeleton()}
       {/* <View className="recommendTextWrapper">
         <Text className="recommendText">搜索结果较少，已为你推荐其他内容</Text>
       </View>