34 lines
887 B
TypeScript
34 lines
887 B
TypeScript
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import Stack from './stack';
|
|
import Text from './text';
|
|
|
|
import './spinner.css';
|
|
|
|
interface ISpinner {
|
|
/** Width and height of the spinner in pixels. */
|
|
size?: number;
|
|
/** Whether to display "Loading..." beneath the spinner. */
|
|
withText?: boolean;
|
|
}
|
|
|
|
/** Spinning loading placeholder. */
|
|
const Spinner = ({ size = 30, withText = true }: ISpinner) => (
|
|
<Stack space={2} justifyContent='center' alignItems='center'>
|
|
<div className='spinner' style={{ width: size, height: size }}>
|
|
{Array.from(Array(12).keys()).map((i) => (
|
|
<div key={i}> </div>
|
|
))}
|
|
</div>
|
|
|
|
{withText && (
|
|
<Text theme='muted' tracking='wide'>
|
|
<FormattedMessage id='loading_indicator.label' defaultMessage='Loading…' />
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
);
|
|
|
|
export { Spinner as default };
|