feat: display loading after a delay time

This commit is contained in:
fantasticit 2022-04-13 08:46:31 +08:00
parent d4ea2bf7e5
commit f4e583b2e7
2 changed files with 46 additions and 5 deletions

View File

@ -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)}
/>
);
};

View File

@ -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;
};