misc_pterodactyl-panel/resources/scripts/components/elements/InputSpinner.tsx

24 lines
688 B
TypeScript
Raw Normal View History

import React from 'react';
import Spinner from '@/components/elements/Spinner';
import { CSSTransition } from 'react-transition-group';
2020-07-04 22:19:46 +00:00
import Fade from '@/components/elements/Fade';
import tw from 'twin.macro';
const InputSpinner = ({ visible, children }: { visible: boolean, children: React.ReactNode }) => (
2020-07-04 22:19:46 +00:00
<div css={tw`relative`}>
<Fade
appear
unmountOnExit
in={visible}
2020-07-04 22:19:46 +00:00
timeout={250}
>
2020-07-04 22:19:46 +00:00
<div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
2020-07-04 19:39:55 +00:00
<Spinner size={'small'}/>
</div>
2020-07-04 22:19:46 +00:00
</Fade>
{children}
</div>
);
export default InputSpinner;