From f4e583b2e765a9022aea302482f06a7dd56bfac7 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Wed, 13 Apr 2022 08:46:31 +0800
Subject: [PATCH] feat: display loading after a delay time

---
 .../src/components/data-render/index.tsx      | 13 ++++---
 .../src/components/data-render/loading.tsx    | 38 +++++++++++++++++++
 2 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 packages/client/src/components/data-render/loading.tsx

diff --git a/packages/client/src/components/data-render/index.tsx b/packages/client/src/components/data-render/index.tsx
index e084ff3d..365a40c1 100644
--- a/packages/client/src/components/data-render/index.tsx
+++ b/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)}
+    />
+  );
 };
diff --git a/packages/client/src/components/data-render/loading.tsx b/packages/client/src/components/data-render/loading.tsx
new file mode 100644
index 00000000..404b8181
--- /dev/null
+++ b/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;
+};