diff options
Diffstat (limited to 'src/components/ui/Loader.tsx')
-rw-r--r-- | src/components/ui/Loader.tsx | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx new file mode 100644 index 000000000..1173c11e7 --- /dev/null +++ b/src/components/ui/Loader.tsx | |||
@@ -0,0 +1,46 @@ | |||
1 | import { Component, ReactChildren } from 'react'; | ||
2 | import { observer, inject } from 'mobx-react'; | ||
3 | import Loader from 'react-loader'; | ||
4 | |||
5 | import { FerdiStores } from '../../stores.types'; | ||
6 | |||
7 | type Props = { | ||
8 | children: ReactChildren; | ||
9 | loaded: boolean; | ||
10 | className: string; | ||
11 | color: string; | ||
12 | stores: FerdiStores; | ||
13 | }; | ||
14 | |||
15 | @inject('stores') | ||
16 | @observer | ||
17 | class LoaderComponent extends Component<Props> { | ||
18 | static defaultProps = { | ||
19 | loaded: false, | ||
20 | color: 'ACCENT', | ||
21 | }; | ||
22 | |||
23 | render() { | ||
24 | const { children, loaded, className } = this.props; | ||
25 | |||
26 | const color = | ||
27 | this.props.color !== 'ACCENT' | ||
28 | ? this.props.color | ||
29 | : this.props.stores.settings.app.accentColor; | ||
30 | |||
31 | return ( | ||
32 | <Loader | ||
33 | loaded={loaded} | ||
34 | width={4} | ||
35 | scale={0.6} | ||
36 | color={color} | ||
37 | component="span" | ||
38 | className={className} | ||
39 | > | ||
40 | {children} | ||
41 | </Loader> | ||
42 | ); | ||
43 | } | ||
44 | } | ||
45 | |||
46 | export default LoaderComponent; | ||