18 lines
657 B
TypeScript
18 lines
657 B
TypeScript
|
import React from 'react';
|
||
|
|
import { CSSTransition } from 'react-transition-group';
|
||
|
|
import { Spinner } from 'components/ui';
|
||
|
|
import './InlineSpinner.scss';
|
||
|
|
|
||
|
|
export const InlineSpinner: React.SFC<{
|
||
|
|
active: boolean;
|
||
|
|
text?: string;
|
||
|
|
}> = ({ active, text }) => (
|
||
|
|
<CSSTransition in={active} timeout={300} classNames="inline-spinner--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={`Calculating-limit small ${active ? 'active' : ''}`}>
|
||
|
|
{text}
|
||
|
|
<Spinner />
|
||
|
|
</div>
|
||
|
|
</CSSTransition>
|
||
|
|
);
|