feat: display loading after a delay time

packages/client/src/components/data-render/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Spin, Typography } from '@douyinfe/semi-ui';
 import { Empty } from 'illustrations/empty';
+import { LoadingWrap } from './loading';
 
 type RenderProps = React.ReactNode | (() => React.ReactNode);
 
@@ -57,10 +58,6 @@ export const DataRender: React.FC<IProps> = ({
   emptyContent = defaultEmpty,
   normalContent,
 }) => {
-  if (loading) {
-    return runRender(loadingContent);
-  }
-
   if (error) {
     return runRender(errorContent, error);
   }
@@ -69,5 +66,11 @@ export const DataRender: React.FC<IProps> = ({
     return runRender(emptyContent);
   }
 
-  return runRender(normalContent);
+  return (
+    <LoadingWrap
+      loading={loading}
+      loadingContent={runRender(loadingContent)}
+      normalContent={loading ? null : runRender(normalContent)}
+    />
+  );
 };

packages/client/src/components/data-render/loading.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react';
+import { useToggle } from 'hooks/use-toggle';
+
+interface IProps {
+  loading: boolean;
+  delay?: number;
+  loadingContent: React.ReactElement;
+  normalContent: React.ReactElement;
+}
+
+export const LoadingWrap: React.FC<IProps> = ({ loading, delay = 300, loadingContent, normalContent }) => {
+  const timer = useRef<ReturnType<typeof setTimeout>>(null);
+  const [showLoading, toggleShowLoading] = useToggle(false);
+
+  useEffect(() => {
+    clearTimeout(timer.current);
+
+    if (!loading) return;
+
+    timer.current = setTimeout(() => {
+      if (loading) {
+        toggleShowLoading(true);
+      } else {
+        toggleShowLoading(false);
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, [delay, loading]);
+
+  if (loading) {
+    return showLoading ? loadingContent : null;
+  }
+
+  return normalContent;
+};