19 lines
640 B
JavaScript
19 lines
640 B
JavaScript
|
import styled from "styled-components";
|
||
|
import { CircledProgressIcon } from "../Icons";
|
||
|
|
||
|
/**
|
||
|
* This loading indicator is designed to be replace entire blocks (i.e. components)
|
||
|
* while they are fetching required data.
|
||
|
*
|
||
|
* It will take 50% of the parent's height, but won't get bigger than 150x150 px.
|
||
|
*/
|
||
|
const Wrapper = styled.div.attrs({
|
||
|
className: "flex w-full h-full justify-center items-center p-8 text-palette-100",
|
||
|
})``;
|
||
|
|
||
|
export const ContainerLoadingIndicator = (props) => (
|
||
|
<Wrapper {...props}>
|
||
|
<CircledProgressIcon size="50%" className="max-w-[150px] max-h-[150px] animate-[spin_3s_linear_infinite]" />
|
||
|
</Wrapper>
|
||
|
);
|