31 lines
919 B
TypeScript
31 lines
919 B
TypeScript
import React from 'react';
|
|
import Spinner from '@/components/elements/Spinner';
|
|
import Fade from '@/components/elements/Fade';
|
|
import tw from 'twin.macro';
|
|
import styled, { css } from 'styled-components/macro';
|
|
import Select from '@/components/elements/Select';
|
|
|
|
const Container = styled.div<{ visible?: boolean }>`
|
|
${tw`relative`};
|
|
|
|
${(props) =>
|
|
props.visible &&
|
|
css`
|
|
& ${Select} {
|
|
background-image: none;
|
|
}
|
|
`};
|
|
`;
|
|
|
|
const InputSpinner = ({ visible, children }: { visible: boolean; children: React.ReactNode }) => (
|
|
<Container visible={visible}>
|
|
<Fade appear unmountOnExit in={visible} timeout={150}>
|
|
<div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
|
|
<Spinner size={'small'} />
|
|
</div>
|
|
</Fade>
|
|
{children}
|
|
</Container>
|
|
);
|
|
|
|
export default InputSpinner;
|