Loading
function ConditionalRenderingDemo() {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => {
setIsLoading(false);
}, 2000);
}, []);
return (
<>
{isLoading ? (
<div>
<Spinner />
<p>Loading</p>
</div>
) : (
<p>Done</p>
)}
</>
);
}
const spin = keyframes`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg)
}
`;
const Spinner = styled(ImSpinner2)`
animation: ${spin} 1.5s linear infinite;
`;
Note: Code snippets do not include styling details unless they are the focus of the exercise.
Copyright © 2022 Explore React