accounts-frontend/packages/app/components/ui/loader/ComponentLoader.tsx

27 lines
649 B
TypeScript
Raw Normal View History

import React from 'react';
2019-12-08 01:13:08 +05:30
import clsx from 'clsx';
import { Skin } from 'app/components/ui';
2016-08-14 14:28:14 +05:30
import styles from './componentLoader.scss';
2019-12-30 13:45:40 +05:30
// TODO: add mode to not show loader until first ~150ms
2019-12-07 16:58:52 +05:30
function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
return (
<div
2019-12-08 01:13:08 +05:30
className={clsx(styles.componentLoader, styles[`${skin}ComponentLoader`])}
>
<div className={styles.spins}>
{new Array(5).fill(0).map((_, index) => (
<div
2019-12-08 01:13:08 +05:30
className={clsx(styles.spin, styles[`spin${index}`])}
key={index}
/>
))}
</div>
</div>
);
2016-08-14 14:28:14 +05:30
}
2019-12-07 16:58:52 +05:30
export default ComponentLoader;