dispay react component after some time

1import React, { useState, useEffect } from 'react';
2
3type Props = {
4  children: React.ReactElement;
5  waitBeforeShow?: number;
6};
7
8const Delayed = ({ children, waitBeforeShow = 500 }: Props) => {
9  const [isShown, setIsShown] = useState(false);
10
11  useEffect(() => {
12    console.log(waitBeforeShow);
13    setTimeout(() => {
14      setIsShown(true);
15    }, waitBeforeShow);
16  }, [waitBeforeShow]);
17
18  return isShown ? children : null;
19};
20
21export default Delayed;

1export function LoadingScreen = ({ children }: Props) => {
2  return (
3    <Delayed>
4      <div />
5    </Delayed>
6  );
7};