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;