2020-04-23 13:31:39 -07:00
|
|
|
import React from "react";
|
|
|
|
import { Box } from "@chakra-ui/core";
|
|
|
|
|
2020-04-23 23:43:39 -07:00
|
|
|
export function Delay({ children, ms = 300 }) {
|
2020-04-23 13:31:39 -07:00
|
|
|
const [isVisible, setIsVisible] = React.useState(false);
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
const id = setTimeout(() => setIsVisible(true), ms);
|
|
|
|
return () => clearTimeout(id);
|
|
|
|
}, [ms, setIsVisible]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box opacity={isVisible ? 1 : 0} transition="opacity 0.5s">
|
|
|
|
{children}
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|