diff --git a/site/test-coverage.js b/site/test-coverage.js
index 7a0c18d115..90f2643924 100644
--- a/site/test-coverage.js
+++ b/site/test-coverage.js
@@ -1,33 +1,33 @@
 module.exports = {
   "Util": {
-    "statements": "57.95%",
-    "branches": "43.1%",
-    "functions": "65.49%",
-    "lines": "59.83%"
+    "statements": "57.94%",
+    "branches": "43.51%",
+    "functions": "65.48%",
+    "lines": "59.82%"
   },
   "affix": {
     "statements": "87.3%",
-    "branches": "56.67%",
+    "branches": "56.66%",
     "functions": "87.5%",
     "lines": "88.52%"
   },
   "alert": {
-    "statements": "97.06%",
-    "branches": "72.73%",
+    "statements": "97.05%",
+    "branches": "72.72%",
     "functions": "100%",
     "lines": "100%"
   },
   "anchor": {
     "statements": "93.16%",
-    "branches": "66.67%",
+    "branches": "66.66%",
     "functions": "88%",
-    "lines": "97.17%"
+    "lines": "97.16%"
   },
   "autoComplete": {
     "statements": "95.39%",
     "branches": "89.33%",
-    "functions": "97.06%",
-    "lines": "97.89%"
+    "functions": "97.05%",
+    "lines": "97.88%"
   },
   "avatar": {
     "statements": "97.01%",
@@ -42,10 +42,10 @@ module.exports = {
     "lines": "100%"
   },
   "breadcrumb": {
-    "statements": "86.96%",
+    "statements": "86.95%",
     "branches": "57.69%",
     "functions": "83.33%",
-    "lines": "90.91%"
+    "lines": "90.9%"
   },
   "button": {
     "statements": "100%",
@@ -55,7 +55,7 @@ module.exports = {
   },
   "calendar": {
     "statements": "75.98%",
-    "branches": "50.33%",
+    "branches": "50.32%",
     "functions": "70%",
     "lines": "78.57%"
   },
@@ -66,20 +66,20 @@ module.exports = {
     "lines": "100%"
   },
   "cascader": {
-    "statements": "93.46%",
-    "branches": "71.74%",
-    "functions": "92.31%",
-    "lines": "95.88%"
+    "statements": "93.45%",
+    "branches": "71.73%",
+    "functions": "92.3%",
+    "lines": "95.87%"
   },
   "checkbox": {
     "statements": "90.54%",
-    "branches": "83.02%",
+    "branches": "83.01%",
     "functions": "100%",
-    "lines": "92.86%"
+    "lines": "92.85%"
   },
   "collapse": {
     "statements": "96.1%",
-    "branches": "78.95%",
+    "branches": "78.94%",
     "functions": "93.75%",
     "lines": "96.05%"
   },
@@ -96,28 +96,28 @@ module.exports = {
     "lines": "100%"
   },
   "common": {
-    "statements": "94.34%",
-    "branches": "84.62%",
+    "statements": "94.33%",
+    "branches": "84.61%",
     "functions": "100%",
-    "lines": "97.92%"
+    "lines": "97.91%"
   },
   "configProvider": {
-    "statements": "70.59%",
-    "branches": "66.67%",
+    "statements": "70.58%",
+    "branches": "66.66%",
     "functions": "25%",
     "lines": "68.75%"
   },
   "datePicker": {
     "statements": "68%",
-    "branches": "46.76%",
-    "functions": "63.08%",
-    "lines": "72.4%"
+    "branches": "46.75%",
+    "functions": "63.07%",
+    "lines": "72.39%"
   },
   "dialog": {
     "statements": "85.43%",
     "branches": "70.21%",
     "functions": "84.21%",
-    "lines": "88.41%"
+    "lines": "88.4%"
   },
   "divider": {
     "statements": "100%",
@@ -127,39 +127,39 @@ module.exports = {
   },
   "drawer": {
     "statements": "86.44%",
-    "branches": "82.76%",
-    "functions": "61.54%",
+    "branches": "82.75%",
+    "functions": "61.53%",
     "lines": "89.09%"
   },
   "dropdown": {
     "statements": "94.44%",
     "branches": "61.29%",
-    "functions": "84.62%",
+    "functions": "84.61%",
     "lines": "97.14%"
   },
   "form": {
-    "statements": "45.57%",
-    "branches": "25%",
-    "functions": "39.82%",
-    "lines": "47.94%"
+    "statements": "72.35%",
+    "branches": "61.45%",
+    "functions": "61.94%",
+    "lines": "75.3%"
   },
   "grid": {
-    "statements": "84.54%",
+    "statements": "84.53%",
     "branches": "74.24%",
     "functions": "90%",
-    "lines": "84.54%"
+    "lines": "84.53%"
   },
   "guide": {
     "statements": "100%",
-    "branches": "94.12%",
+    "branches": "94.11%",
     "functions": "100%",
     "lines": "100%"
   },
   "hooks": {
-    "statements": "47.5%",
-    "branches": "27.42%",
-    "functions": "55.26%",
-    "lines": "47.92%"
+    "statements": "51.48%",
+    "branches": "32.91%",
+    "functions": "55.31%",
+    "lines": "52.45%"
   },
   "image": {
     "statements": "100%",
@@ -168,34 +168,34 @@ module.exports = {
     "lines": "100%"
   },
   "imageViewer": {
-    "statements": "75.54%",
+    "statements": "75.53%",
     "branches": "77.19%",
     "functions": "65.71%",
-    "lines": "75.94%"
+    "lines": "75.93%"
   },
   "input": {
     "statements": "93.63%",
-    "branches": "92.73%",
-    "functions": "89.19%",
-    "lines": "93.96%"
+    "branches": "92.72%",
+    "functions": "89.18%",
+    "lines": "93.95%"
   },
   "inputAdornment": {
-    "statements": "86.96%",
-    "branches": "54.55%",
+    "statements": "86.95%",
+    "branches": "54.54%",
     "functions": "100%",
-    "lines": "90.48%"
+    "lines": "90.47%"
   },
   "inputNumber": {
-    "statements": "78.69%",
+    "statements": "78.68%",
     "branches": "66.23%",
-    "functions": "78.95%",
-    "lines": "82.46%"
+    "functions": "78.94%",
+    "lines": "82.45%"
   },
   "layout": {
-    "statements": "91.49%",
-    "branches": "41.67%",
+    "statements": "91.48%",
+    "branches": "41.66%",
     "functions": "85.71%",
-    "lines": "95.56%"
+    "lines": "95.55%"
   },
   "link": {
     "statements": "100%",
@@ -206,37 +206,37 @@ module.exports = {
   "list": {
     "statements": "79.41%",
     "branches": "58.33%",
-    "functions": "66.67%",
+    "functions": "66.66%",
     "lines": "79.41%"
   },
   "loading": {
     "statements": "86.25%",
-    "branches": "66.67%",
+    "branches": "66.66%",
     "functions": "78.57%",
     "lines": "89.47%"
   },
   "locale": {
-    "statements": "73.08%",
+    "statements": "73.07%",
     "branches": "72.22%",
     "functions": "83.33%",
     "lines": "73.91%"
   },
   "menu": {
     "statements": "85.82%",
-    "branches": "69.14%",
+    "branches": "69.13%",
     "functions": "83.33%",
-    "lines": "90.52%"
+    "lines": "90.51%"
   },
   "message": {
-    "statements": "88.44%",
+    "statements": "88.43%",
     "branches": "87.8%",
     "functions": "64.1%",
-    "lines": "94.74%"
+    "lines": "94.73%"
   },
   "notification": {
     "statements": "89.47%",
     "branches": "75%",
-    "functions": "86.96%",
+    "functions": "86.95%",
     "lines": "93.7%"
   },
   "pagination": {
@@ -247,8 +247,8 @@ module.exports = {
   },
   "popconfirm": {
     "statements": "75%",
-    "branches": "53.85%",
-    "functions": "81.82%",
+    "branches": "53.84%",
+    "functions": "81.81%",
     "lines": "75%"
   },
   "popup": {
@@ -258,26 +258,26 @@ module.exports = {
     "lines": "94.44%"
   },
   "progress": {
-    "statements": "88.24%",
-    "branches": "64.71%",
+    "statements": "88.23%",
+    "branches": "64.7%",
     "functions": "100%",
-    "lines": "88.24%"
+    "lines": "88.23%"
   },
   "radio": {
-    "statements": "82.54%",
+    "statements": "82.53%",
     "branches": "45.45%",
-    "functions": "92.86%",
-    "lines": "81.67%"
+    "functions": "92.85%",
+    "lines": "81.66%"
   },
   "rangeInput": {
     "statements": "76.62%",
-    "branches": "66.67%",
+    "branches": "66.66%",
     "functions": "50%",
-    "lines": "76.32%"
+    "lines": "76.31%"
   },
   "rate": {
-    "statements": "96.23%",
-    "branches": "79.17%",
+    "statements": "96.22%",
+    "branches": "79.16%",
     "functions": "100%",
     "lines": "100%"
   },
@@ -289,19 +289,25 @@ module.exports = {
   },
   "selectInput": {
     "statements": "98%",
-    "branches": "91.67%",
+    "branches": "91.66%",
     "functions": "100%",
     "lines": "100%"
   },
+  "skeleton": {
+    "statements": "98.66%",
+    "branches": "89.65%",
+    "functions": "100%",
+    "lines": "98.64%"
+  },
   "slider": {
     "statements": "89.47%",
-    "branches": "67.8%",
-    "functions": "92.86%",
-    "lines": "91.06%"
+    "branches": "67.79%",
+    "functions": "92.85%",
+    "lines": "91.05%"
   },
   "space": {
-    "statements": "92.31%",
-    "branches": "92.31%",
+    "statements": "92.3%",
+    "branches": "92.3%",
     "functions": "100%",
     "lines": "91.89%"
   },
@@ -313,98 +319,98 @@ module.exports = {
   },
   "swiper": {
     "statements": "72.13%",
-    "branches": "42.61%",
+    "branches": "42.6%",
     "functions": "85.71%",
-    "lines": "71.51%"
+    "lines": "71.5%"
   },
   "switch": {
-    "statements": "92.59%",
-    "branches": "84%",
+    "statements": "96.29%",
+    "branches": "92%",
     "functions": "100%",
-    "lines": "96.15%"
+    "lines": "100%"
   },
   "table": {
-    "statements": "48.81%",
-    "branches": "34.33%",
-    "functions": "45.57%",
+    "statements": "48.8%",
+    "branches": "34.32%",
+    "functions": "45.56%",
     "lines": "49.67%"
   },
   "tabs": {
-    "statements": "90.91%",
-    "branches": "79.8%",
+    "statements": "90.9%",
+    "branches": "79.79%",
     "functions": "86.36%",
     "lines": "91.12%"
   },
   "tag": {
     "statements": "97.56%",
-    "branches": "96.3%",
+    "branches": "96.29%",
     "functions": "100%",
     "lines": "100%"
   },
   "tagInput": {
-    "statements": "85.98%",
-    "branches": "83.1%",
+    "statements": "85.97%",
+    "branches": "83.09%",
     "functions": "83.78%",
     "lines": "87.74%"
   },
   "textarea": {
     "statements": "82.43%",
-    "branches": "58.54%",
+    "branches": "58.53%",
     "functions": "80.95%",
     "lines": "86.36%"
   },
   "timePicker": {
-    "statements": "80.65%",
+    "statements": "80.64%",
     "branches": "67.16%",
     "functions": "72.22%",
     "lines": "82.02%"
   },
   "timeline": {
-    "statements": "98.39%",
-    "branches": "88.14%",
+    "statements": "98.38%",
+    "branches": "88.13%",
     "functions": "100%",
     "lines": "98.33%"
   },
   "tooltip": {
     "statements": "90.74%",
-    "branches": "64.71%",
+    "branches": "64.7%",
     "functions": "75%",
-    "lines": "90.57%"
+    "lines": "90.56%"
   },
   "transfer": {
-    "statements": "86.07%",
+    "statements": "86.06%",
     "branches": "67.02%",
-    "functions": "84.29%",
-    "lines": "87.78%"
+    "functions": "84.28%",
+    "lines": "87.77%"
   },
   "tree": {
     "statements": "51.87%",
-    "branches": "34.17%",
+    "branches": "34.16%",
     "functions": "51.28%",
     "lines": "52.79%"
   },
   "treeSelect": {
     "statements": "95.17%",
     "branches": "86.44%",
-    "functions": "97.44%",
+    "functions": "97.43%",
     "lines": "95.62%"
   },
   "upload": {
     "statements": "96.55%",
     "branches": "100%",
-    "functions": "88.89%",
+    "functions": "88.88%",
     "lines": "100%"
   },
   "watermark": {
-    "statements": "95.24%",
-    "branches": "84.38%",
+    "statements": "95.23%",
+    "branches": "84.37%",
     "functions": "100%",
     "lines": "100%"
   },
   "utils": {
     "statements": "74.07%",
     "branches": "79.41%",
-    "functions": "82.61%",
-    "lines": "73.08%"
+    "functions": "82.6%",
+    "lines": "73.07%"
   }
 };
diff --git a/src/hooks/useCountUp.ts b/src/hooks/useCountUp.ts
new file mode 100644
index 0000000000..9282eab1db
--- /dev/null
+++ b/src/hooks/useCountUp.ts
@@ -0,0 +1,109 @@
+const requestAnimationFrame =
+  (typeof window === 'undefined' ? false : window.requestAnimationFrame) || ((cb) => setTimeout(cb, 16.6));
+const cancelAnimationFrame =
+  (typeof window === 'undefined' ? false : window.cancelAnimationFrame) || ((id) => clearTimeout(id));
+
+type CountUpProps = {
+  // 计时器计时上限
+  maxTime?: number;
+  // 浏览器每次重绘前的回调
+  onChange?: (currentTime?: number) => void;
+  // 计时结束回调行为
+  onFinish?: () => void;
+};
+
+const useCountUp = (options: CountUpProps) => {
+  const { maxTime, onChange, onFinish } = options;
+  // 记录最新动画id
+  let rafId;
+  // 计时器起始时间
+  let startTime;
+  // 计时器暂停时间
+  let stopTime;
+  // 计时器启动后历经时长
+  let currentTime;
+  // 是否计时中
+  let counting = false;
+
+  /**
+   * 暂停计时
+   * @returns
+   */
+  const pause = () => {
+    // 已经暂停后，屏蔽掉点击
+    if (!counting) return;
+
+    counting = false;
+    stopTime = performance.now();
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+    }
+  };
+
+  /**
+   * 停止计时
+   */
+  const stop = () => {
+    pause();
+    onFinish?.();
+  };
+
+  /**
+   * 浏览器下一次重绘之前更新动画帧所调用的函数
+   */
+  const step = () => {
+    // performance.now(): requestAnimationFrame()开始去执行回调函数的时刻
+    currentTime = performance.now() - startTime;
+    onChange?.(currentTime);
+
+    if (maxTime && Math.floor(currentTime) >= maxTime) {
+      stop();
+      return;
+    }
+    rafId = requestAnimationFrame(step);
+  };
+
+  /**
+   * 启动计时器
+   */
+  const start = () => {
+    // 计时中 或者 曾经计时过想要重新开始计时，应该先点击一下 重置 再开始计时
+    if (counting || currentTime) return;
+
+    counting = true;
+    startTime = performance.now();
+    rafId = requestAnimationFrame(step);
+  };
+
+  /**
+   * 计时器继续计时
+   */
+  const goOn = () => {
+    // 已经在计时中，屏蔽掉点击
+    if (counting) return;
+
+    counting = true;
+    startTime += performance.now() - stopTime;
+    rafId = requestAnimationFrame(step);
+  };
+
+  /**
+   * 重置计时器
+   */
+  const reset = () => {
+    stop();
+    currentTime = 0;
+    startTime = 0;
+    stopTime = 0;
+  };
+
+  return {
+    start,
+    pause,
+    stop,
+    goOn,
+    reset,
+  };
+};
+
+export default useCountUp;
diff --git a/src/skeleton/Skeleton.tsx b/src/skeleton/Skeleton.tsx
index 9890018af1..5fa1473875 100644
--- a/src/skeleton/Skeleton.tsx
+++ b/src/skeleton/Skeleton.tsx
@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import isNumber from 'lodash/isNumber';
 import classNames from 'classnames';
 import { SkeletonRowCol, SkeletonRowColObj, TdSkeletonProps } from './type';
 
 import { StyledProps, Styles } from '../common';
 import useConfig from '../hooks/useConfig';
+import useCountUp from '../hooks/useCountUp';
 import { pxCompat } from '../_util/helper';
 import parseTNode from '../_util/parseTNode';
 import { skeletonDefaultProps } from './defaultProps';
 
-export type SkeletonProps = TdSkeletonProps & StyledProps & { children: React.ReactNode };
+export type SkeletonProps = TdSkeletonProps & StyledProps;
 
 const ThemeMap: Record<TdSkeletonProps['theme'], SkeletonRowCol> = {
   text: [1],
@@ -24,10 +25,35 @@ const ThemeMap: Record<TdSkeletonProps['theme'], SkeletonRowCol> = {
   ],
 };
 
-const Skeleton = (props: SkeletonProps) => {
-  const { animation, loading, rowCol, theme, className, style, delay = 0, children } = props;
+// 超过delay时长，loading仍为true时，为解决骨架屏一闪而过问题，默认骨架屏存在时长500ms
+const DEFAULT_DURATION = 500;
+// 统计loading时长的最小时间间隔
+const DEFAULT_MIN_INTERVAL = 16.7;
 
+const Skeleton = (props: SkeletonProps) => {
+  const { animation, loading, rowCol, theme, className, style, children } = props;
+  let { delay = 0 } = props;
+  // delay最小值为统计loading时长的最小时间间隔，一般在loading时长大于34时，骨架屏才生效
+  if (delay > 0 && delay < DEFAULT_MIN_INTERVAL) {
+    delay = DEFAULT_MIN_INTERVAL;
+  }
+  const loadingTime = useRef(0);
+  const [ctrlLoading, setCtrlLoading] = useState(loading);
   const { classPrefix } = useConfig();
+
+  const countupChange = (currentTime) => {
+    loadingTime.current = currentTime;
+    if (currentTime > delay) {
+      setCtrlLoading(true);
+    }
+  };
+  const countupFinish = () => {
+    setCtrlLoading(false);
+  };
+  const { start, stop } = useCountUp({
+    onChange: countupChange,
+    onFinish: countupFinish,
+  });
   const name = `${classPrefix}-skeleton`; // t-skeleton
 
   const renderCols = (_cols: Number | SkeletonRowColObj | Array<SkeletonRowColObj>) => {
@@ -87,31 +113,49 @@ const Skeleton = (props: SkeletonProps) => {
     ));
   };
 
-  const [ctrlLoading, setCtrlLoading] = useState(loading);
+  // 清除骨架屏
+  const clearSkeleton = () => {
+    setCtrlLoading(false);
+    stop();
+  };
 
   useEffect(() => {
-    if (delay > 0 && !loading) {
-      const timeout = setTimeout(() => {
-        setCtrlLoading(loading);
-      }, delay);
-      return () => clearTimeout(timeout);
+    // 骨架屏无需展示
+    if (!loading) {
+      // 加载时长超过delay时，需加载DEFAULT_DURATION时长的骨架屏
+      if (delay > 0 && loadingTime.current > delay) {
+        setCtrlLoading(true);
+        const timeout = setTimeout(() => {
+          clearSkeleton();
+        }, DEFAULT_DURATION);
+        return () => clearTimeout(timeout);
+      }
+      // 直接展示内容
+      clearSkeleton();
+    } else {
+      // 存在delay时，暂不展示骨架屏
+      if (delay > 0) {
+        setCtrlLoading(false);
+        start();
+        return stop;
+      }
+      // 直接展示骨架屏
+      setCtrlLoading(true);
     }
-
-    setCtrlLoading(loading);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [delay, loading]);
 
   if (!ctrlLoading) {
-    return <>{children}</>;
+    return <>{children || props.content}</>;
   }
 
   const childrenContent = [];
-  if (theme) {
-    childrenContent.push(renderRowCol(ThemeMap[theme]));
-  }
+
   if (rowCol) {
     childrenContent.push(renderRowCol(rowCol));
-  }
-  if (!theme && !rowCol) {
+  } else if (theme) {
+    childrenContent.push(renderRowCol(ThemeMap[theme]));
+  } else {
     // 什么都不传时，传入默认 rowCol
     childrenContent.push(renderRowCol([1, 1, 1, { width: '70%' }]));
   }
diff --git a/src/skeleton/__tests__/__snapshots__/vitest-skeleton.test.jsx.snap b/src/skeleton/__tests__/__snapshots__/vitest-skeleton.test.jsx.snap
new file mode 100644
index 0000000000..c46c4ee795
--- /dev/null
+++ b/src/skeleton/__tests__/__snapshots__/vitest-skeleton.test.jsx.snap
@@ -0,0 +1,21 @@
+// Vitest Snapshot v1
+
+exports[`Skeleton Component > props.children works fine 1`] = `
+<div>
+  <span
+    class="custom-node"
+  >
+    TNode
+  </span>
+</div>
+`;
+
+exports[`Skeleton Component > props.content works fine 1`] = `
+<div>
+  <span
+    class="custom-node"
+  >
+    TNode
+  </span>
+</div>
+`;
diff --git a/src/skeleton/__tests__/mount.jsx b/src/skeleton/__tests__/mount.jsx
new file mode 100644
index 0000000000..20138b23fe
--- /dev/null
+++ b/src/skeleton/__tests__/mount.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@test/utils';
+
+const getContent = (Skeleton, props, events) => <Skeleton {...props} {...events}>
+<div className='main-content'>
+  <p>
+    骨架屏组件，是指当网络较慢时，在页面真实数据加载之前，给用户展示出页面的大致结构。
+  </p>
+</div>
+</Skeleton>;
+
+export function getSkeletonDefaultMount(...args) {
+  return render(getContent(...args));
+}
+
+export function getSkeletonInfo(...args) {
+  return {
+    mountedContent: render(getContent(...args)),
+    getContent
+  };
+}
diff --git a/src/skeleton/__tests__/skeleton.test.jsx b/src/skeleton/__tests__/skeleton.test.jsx
new file mode 100644
index 0000000000..051226f5c0
--- /dev/null
+++ b/src/skeleton/__tests__/skeleton.test.jsx
@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * 该文件由脚本自动生成，如需修改请联系 PMC
+ * This file generated by scripts of tdesign-api. `npm run api:docs Skeleton React(PC) vitest,finalProject`
+ * If you need to modify this file, contact PMC first please.
+ */
+import React from 'react';
+import { fireEvent, vi, render, mockDelay, screen } from '@test/utils';
+import { Skeleton } from '..';
+import { getSkeletonDefaultMount, getSkeletonInfo } from './mount';
+
+describe('Skeleton Component', () => {
+  it('props.delay: show loading delay 10ms', async () => {
+    const props = { delay: 10 };
+    const { mountedContent, getContent } = getSkeletonInfo(Skeleton, props);
+    expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeFalsy();
+    setTimeout(() => { 
+      mountedContent.rerender(getContent(Skeleton, {...props, loading: false}));
+      expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeFalsy();
+    }, 10);
+    setTimeout(() => { 
+      expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeFalsy();
+      mountedContent.rerender(getContent(Skeleton, { ...props, loading: true }));
+    }, 20);
+    // <34 都不会有骨架屏
+    await mockDelay(35);
+    mountedContent.rerender(getContent(Skeleton, { ...props, loading: false }));
+    expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeTruthy();
+  });
+});
diff --git a/src/skeleton/__tests__/skeleton.test.tsx b/src/skeleton/__tests__/skeleton.test.tsx
deleted file mode 100644
index c3af1b648b..0000000000
--- a/src/skeleton/__tests__/skeleton.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-// import { render } from '@test/utils';
-// import React from 'react';
-// import Skeleton from '../index';
-
-// TODO
-describe('Skeleton 组件测试', () => {
-  test('dom', () => {
-    expect(true).toBe(true);
-  });
-});
diff --git a/src/skeleton/__tests__/vitest-skeleton.test.jsx b/src/skeleton/__tests__/vitest-skeleton.test.jsx
new file mode 100644
index 0000000000..6ba9907775
--- /dev/null
+++ b/src/skeleton/__tests__/vitest-skeleton.test.jsx
@@ -0,0 +1,164 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * 该文件由脚本自动生成，如需修改请联系 PMC
+ * This file generated by scripts of tdesign-api. `npm run api:docs Skeleton React(PC) vitest,finalProject`
+ * If you need to modify this file, contact PMC first please.
+ */
+import React from 'react';
+import { fireEvent, vi, render, mockDelay, screen } from '@test/utils';
+import { Skeleton } from '..';
+import { getSkeletonDefaultMount, getSkeletonInfo } from './mount';
+
+describe('Skeleton Component', () => {
+  ['gradient', 'flashed', 'none'].forEach((item) => {
+    it(`props.animation is equal to ${item}`, () => {
+      const wrapper = getSkeletonDefaultMount(Skeleton, { animation: item });
+      const container = wrapper.container.querySelector('.t-skeleton__col');
+      expect(container).toHaveClass(`t-skeleton--animation-${item}`);
+    });
+  });
+
+  it('props.children works fine', () => {
+    const { container } = render(
+      <Skeleton loading={false}>
+        <span className="custom-node">TNode</span>
+      </Skeleton>,
+    );
+    expect(container.querySelector('.custom-node')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('props.content works fine', () => {
+    const { container } = render(
+      <Skeleton content={<span className="custom-node">TNode</span>} loading={false}></Skeleton>,
+    );
+    expect(container.querySelector('.custom-node')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('props.delay: show loading delay 100ms', async () => {
+    const props = { delay: 100, loading: true };
+    const { mountedContent, getContent } = getSkeletonInfo(Skeleton, props);
+    expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeFalsy();
+    await mockDelay(50);
+    mountedContent.rerender(getContent(Skeleton, {...props, loading: false}));
+    expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeFalsy();
+    await mockDelay(80);
+    expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeFalsy();
+
+    mountedContent.rerender(getContent(Skeleton, {...props, loading: true}));
+    expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeFalsy();
+    await mockDelay(150);
+    expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeTruthy();
+    mountedContent.rerender(getContent(Skeleton, {...props, loading: false}));
+    expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeTruthy();
+    await mockDelay(650);
+    expect(mountedContent.container.querySelector('.t-skeleton__row')).toBeFalsy();
+  });
+
+  it('props.loading is equal true', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { loading: true });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(1);
+  });
+
+  it('props.loading is equal false', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { loading: false });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(0);
+  });
+
+  it('props.rowCol is equal [1,1,2]', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { rowCol: [1, 1, 2] });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(3);
+    expect(container.querySelectorAll('.t-skeleton__row:first-child .t-skeleton__col').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton__row:nth-child(2) .t-skeleton__col').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton__row:nth-child(3) .t-skeleton__col').length).toBe(2);
+  });
+
+  it('props.rowCol is equal [1, 1, { width: 100px }]', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { rowCol: [1, 1, { width: '100px' }] });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(3);
+    expect(container.querySelectorAll('.t-skeleton__row:first-child .t-skeleton__col').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton__row:nth-child(3) .t-skeleton__col').length).toBe(1);
+  });
+
+  it('props.rowCol is equal [1, 2, [{ width: 100, height: 35 }, { width: 101, height: 36, marginLeft: 16 }]]', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, {
+      rowCol: [
+        1,
+        2,
+        [
+          { width: 100, height: 35 },
+          { width: 101, height: 36, marginLeft: 16 },
+        ],
+      ],
+    });
+    expect(container.querySelectorAll('.t-skeleton__row:first-child .t-skeleton__col').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton__row:nth-child(2) .t-skeleton__col').length).toBe(2);
+    expect(container.querySelectorAll('.t-skeleton__row:nth-child(3) .t-skeleton__col').length).toBe(2);
+  });
+
+  it(`props.rowCol is equal to [1, 1, { width: '100px' }]`, () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { rowCol: [1, 1, { width: '100px' }] });
+    const domWrapper = container.querySelector('.t-skeleton__row:nth-child(3) .t-skeleton__col');
+    expect(domWrapper.style.width).toBe('100px');
+  });
+  it(`props.rowCol is equal to [1, 2, [{ width: '100px', height: '35px' }, { width: '101px', height: '36px', marginLeft: '16px' }]]`, () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, {
+      rowCol: [
+        1,
+        2,
+        [
+          { width: '100px', height: '35px' },
+          { width: '101px', height: '36px', marginLeft: '16px' },
+        ],
+      ],
+    });
+    const domWrapper = container.querySelector('.t-skeleton__row:nth-child(3) .t-skeleton__col:first-child');
+    expect(domWrapper.style.width).toBe('100px');
+    const domWrapper1 = container.querySelector('.t-skeleton__row:nth-child(3) .t-skeleton__col:nth-child(2)');
+    expect(domWrapper1.style.width).toBe('101px');
+    expect(domWrapper1.style.height).toBe('36px');
+    expect(domWrapper1.style.marginLeft).toBe('16px');
+  });
+
+  it('props.theme is equal text', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { theme: 'text' });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton__col').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton--type-text').length).toBe(1);
+  });
+
+  it('props.theme is equal avatar', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { theme: 'avatar' });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton__col').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton--type-circle').length).toBe(1);
+  });
+
+  it('props.theme is equal paragraph', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { theme: 'paragraph' });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(3);
+    expect(container.querySelectorAll('.t-skeleton__col').length).toBe(3);
+    expect(container.querySelectorAll('.t-skeleton--type-text').length).toBe(3);
+  });
+
+  it('props.theme is equal avatar-text', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { theme: 'avatar-text' });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton__col').length).toBe(2);
+    expect(container.querySelectorAll('.t-skeleton--type-text').length).toBe(1);
+    expect(container.querySelectorAll('.t-skeleton--type-circle').length).toBe(1);
+  });
+
+  it('props.theme is equal tab', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { theme: 'tab' });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(2);
+    expect(container.querySelectorAll('.t-skeleton__col').length).toBe(2);
+    expect(container.querySelectorAll('.t-skeleton--type-text').length).toBe(2);
+  });
+
+  it('props.theme is equal article', () => {
+    const { container } = getSkeletonDefaultMount(Skeleton, { theme: 'article' });
+    expect(container.querySelectorAll('.t-skeleton__row').length).toBe(6);
+  });
+});
diff --git a/src/skeleton/_example/delay.jsx b/src/skeleton/_example/delay.jsx
index 83699148f5..e6c6419c14 100644
--- a/src/skeleton/_example/delay.jsx
+++ b/src/skeleton/_example/delay.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Skeleton, Switch } from 'tdesign-react';
 
 const style = {
@@ -10,12 +10,20 @@ const style = {
   },
 };
 
+const CONTENT = <div style={style['t-skeleton-demo-paragraph']}>
+  <p>设置最短延迟响应时间，低于响应时间的操作不显示加载状态。</p>
+</div>;
+
 export default function BasicSkeleton() {
   const [checked, setChecked] = useState(true);
+  const [content, setContent] = useState(null);
+  const loadingTimeChecked = useRef(0);
+  const loadingTimeUnChecked = useRef(0);
 
   const onChange = (value) => {
-    console.log('value', value);
+    console.log('checked：', value, '勾选：', loadingTimeChecked.current, '取消勾选：', loadingTimeUnChecked.current);
     setChecked(value);
+    setContent(value ? null : CONTENT);
   };
 
   return (
@@ -25,9 +33,7 @@ export default function BasicSkeleton() {
       </div>
       <div>
         <Skeleton loading={checked} delay={1500} animation="flashed">
-          <div style={style['t-skeleton-demo-paragraph']}>
-            <p>设置最短延迟响应时间，低于响应时间的操作不显示加载状态。</p>
-          </div>
+          {content}
         </Skeleton>
       </div>
     </div>
diff --git a/src/skeleton/skeleton.en-US.md b/src/skeleton/skeleton.en-US.md
index 15354c585f..4be30e9114 100644
--- a/src/skeleton/skeleton.en-US.md
+++ b/src/skeleton/skeleton.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Skeleton Props
 
 name | type | default | description | required
@@ -9,6 +8,8 @@ name | type | default | description | required
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
 animation | String | none | options：gradient/flashed/none | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 delay | Number | 0 | \- | N
 loading | Boolean | true | \- | N
 rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/skeleton/type.ts) | N
diff --git a/src/skeleton/skeleton.md b/src/skeleton/skeleton.md
index ccf047b825..5b994b16c0 100644
--- a/src/skeleton/skeleton.md
+++ b/src/skeleton/skeleton.md
@@ -8,7 +8,9 @@
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
-delay | Number | 0 | 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
+children | TNode | - | 加载完成的内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | 加载完成的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
 loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
 rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/skeleton/type.ts) | N
 theme | String | text | 快捷定义骨架图风格，有基础、头像组合等，具体参看代码示例。可选项：text/avatar/paragraph/avatar-text/tab/article | N
diff --git a/src/skeleton/type.ts b/src/skeleton/type.ts
index d95435a7e3..afd5fe0af7 100644
--- a/src/skeleton/type.ts
+++ b/src/skeleton/type.ts
@@ -13,7 +13,15 @@ export interface TdSkeletonProps {
    */
   animation?: 'gradient' | 'flashed' | 'none';
   /**
-   * 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+   * 加载完成的内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 加载完成的内容
+   */
+  content?: TNode;
+  /**
+   * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
    * @default 0
    */
   delay?: number;
diff --git a/src/switch/__tests__/switch.test.tsx b/src/switch/__tests__/switch.test.tsx
index 3395c3b60e..ad1dbb60d0 100644
--- a/src/switch/__tests__/switch.test.tsx
+++ b/src/switch/__tests__/switch.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { render, fireEvent, vi } from '@test/utils';
 import Switch from '../Switch';
+import log from '../../_common/js/log';
+import noop from '../../_util/noop';
 
 describe('Switch 组件测试', () => {
   test('create', async () => {
@@ -37,4 +39,11 @@ describe('Switch 组件测试', () => {
     fireEvent.click(container.firstChild);
     expect(clickFn).toBeCalledTimes(1);
   });
+
+  test('should log error if value is not in customValue', async () => {
+    const logSpy = vi.spyOn(log, 'error').mockImplementation(noop);
+    render(<Switch customValue={[0, 1]} value={false} />);
+    expect(logSpy).toBeCalledTimes(1);
+    logSpy.mockRestore();
+  });
 });
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 4708886c59..91b97e0115 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -168736,13 +168736,6 @@ exports[`csr snapshot test > csr test src/skeleton/_example/advance.jsx 1`] = `
             class="content"
           >
             <div>
-              <div
-                class="t-skeleton__row"
-              >
-                <div
-                  class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
-              </div>
               <div
                 class="t-skeleton__row"
               >
@@ -168991,13 +168984,6 @@ exports[`csr snapshot test > csr test src/skeleton/_example/advance.jsx 1`] = `
           class="content"
         >
           <div>
-            <div
-              class="t-skeleton__row"
-            >
-              <div
-                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-              />
-            </div>
             <div
               class="t-skeleton__row"
             >
@@ -169606,17 +169592,7 @@ exports[`csr snapshot test > csr test src/skeleton/_example/delay.jsx 1`] = `
             />
           </button>
         </div>
-        <div>
-          <div>
-            <div
-              class="t-skeleton__row"
-            >
-              <div
-                class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-              />
-            </div>
-          </div>
-        </div>
+        <div />
       </div>
     </div>
   </body>,
@@ -169637,17 +169613,7 @@ exports[`csr snapshot test > csr test src/skeleton/_example/delay.jsx 1`] = `
           />
         </button>
       </div>
-      <div>
-        <div>
-          <div
-            class="t-skeleton__row"
-          >
-            <div
-              class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-            />
-          </div>
-        </div>
-      </div>
+      <div />
     </div>
   </div>,
   "debug": [Function],