MyCrypto/common/components/ui/InlineSpinner.tsx

20 lines
647 B
TypeScript

import React from 'react';
import { CSSTransition } from 'react-transition-group';
import { Spinner } from 'components/ui';
import './InlineSpinner.scss';
interface Props {
active: boolean;
text?: string;
}
export const InlineSpinner: React.SFC<Props> = ({ active, text }) => (
<CSSTransition in={active} timeout={300} classNames="InlineSpinner--fade">
{/* TODO: when react-transition-group v2.3 releases, use '-done' classes instead of conditional 'active' class https://github.com/reactjs/react-transition-group/issues/274 */}
<div className="InlineSpinner small">
{text}
<Spinner />
</div>
</CSSTransition>
);