diff options
Diffstat (limited to 'src/components/ui/loader/index.tsx')
-rw-r--r-- | src/components/ui/loader/index.tsx | 41 |
1 files changed, 27 insertions, 14 deletions
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx index 957899bdc..2cee00d96 100644 --- a/src/components/ui/loader/index.tsx +++ b/src/components/ui/loader/index.tsx | |||
@@ -1,26 +1,39 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Component } from 'react'; | 2 | import { Component } from 'react'; |
3 | import injectStyle, { WithStylesProps } from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | import ReactLoader from 'react-loader'; | 4 | import { Oval } from 'react-loader-spinner'; |
5 | import { Theme } from '../../../themes'; | 5 | import { inject } from 'mobx-react'; |
6 | import { FerdiumStores } from '../../../@types/stores.types'; | ||
6 | 7 | ||
7 | const styles = (theme: Theme) => ({ | 8 | const styles = () => ({ |
8 | container: { | 9 | container: { |
9 | position: 'relative', | 10 | position: 'relative', |
10 | height: 60, | 11 | display: 'flex', |
12 | justifyContent: 'center', | ||
13 | alignItems: 'center', | ||
14 | height: 'inherit', | ||
11 | }, | 15 | }, |
12 | loader: {}, | ||
13 | color: theme.colorText, | ||
14 | }); | 16 | }); |
15 | 17 | ||
16 | interface IProps extends WithStylesProps<typeof styles> { | 18 | interface IProps extends WithStylesProps<typeof styles> { |
17 | className?: string; | 19 | className?: string; |
18 | color?: string; | 20 | color?: string; |
21 | size?: number; | ||
22 | loaded?: boolean; | ||
23 | stores?: FerdiumStores; | ||
19 | } | 24 | } |
20 | 25 | ||
26 | @inject('stores') | ||
21 | class LoaderComponent extends Component<IProps> { | 27 | class LoaderComponent extends Component<IProps> { |
22 | render() { | 28 | render() { |
23 | const { classes, className, color } = this.props; | 29 | const { |
30 | classes, | ||
31 | className, | ||
32 | size = 36, | ||
33 | color = this.props.stores?.settings.app.accentColor, | ||
34 | loaded = false, | ||
35 | } = this.props; | ||
36 | const loaderColor = color || '#FFFFFF'; | ||
24 | 37 | ||
25 | return ( | 38 | return ( |
26 | <div | 39 | <div |
@@ -30,13 +43,13 @@ class LoaderComponent extends Component<IProps> { | |||
30 | })} | 43 | })} |
31 | data-type="franz-loader" | 44 | data-type="franz-loader" |
32 | > | 45 | > |
33 | <ReactLoader | 46 | <Oval |
34 | loaded={false} | 47 | strokeWidth={5} |
35 | width={4} | 48 | color={loaderColor} |
36 | scale={0.75} | 49 | secondaryColor={loaderColor} |
37 | color={color || classes.color} | 50 | height={size} |
38 | // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps></LoaderProps> | 51 | width={size} |
39 | parentClassName={classes.loader} | 52 | visible={!loaded} |
40 | /> | 53 | /> |
41 | </div> | 54 | </div> |
42 | ); | 55 | ); |