Show a message when the spinner is displayed
This commit is contained in:
parent
93cab68cc3
commit
43f8ec23b8
2 changed files with 14 additions and 4 deletions
|
@ -10,16 +10,17 @@ interface Props {
|
|||
backgroundOpacity?: number;
|
||||
}
|
||||
|
||||
const SpinnerOverlay = ({ size, fixed, visible, backgroundOpacity }: Props) => (
|
||||
const SpinnerOverlay: React.FC<Props> = ({ size, fixed, visible, backgroundOpacity, children }) => (
|
||||
<Fade timeout={150} in={visible} unmountOnExit>
|
||||
<div
|
||||
css={[
|
||||
tw`top-0 left-0 flex items-center justify-center w-full h-full rounded`,
|
||||
tw`top-0 left-0 flex items-center justify-center w-full h-full rounded flex-col`,
|
||||
!fixed ? tw`absolute` : tw`fixed`,
|
||||
]}
|
||||
style={{ zIndex: 9999, background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }}
|
||||
>
|
||||
<Spinner size={size}/>
|
||||
{children && (typeof children === 'string' ? <p css={tw`mt-4 text-neutral-400`}>{children}</p> : children)}
|
||||
</div>
|
||||
</Fade>
|
||||
);
|
||||
|
|
Reference in a new issue