diff options
Diffstat (limited to 'src/components/ui/Loader.tsx')
-rw-r--r-- | src/components/ui/Loader.tsx | 27 |
1 files changed, 13 insertions, 14 deletions
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx index 5e78ed47a..ebb437d9d 100644 --- a/src/components/ui/Loader.tsx +++ b/src/components/ui/Loader.tsx | |||
@@ -1,4 +1,4 @@ | |||
1 | import { Component, PropsWithChildren } from 'react'; | 1 | import { Component, ReactElement, ReactNode } from 'react'; |
2 | import { observer, inject } from 'mobx-react'; | 2 | import { observer, inject } from 'mobx-react'; |
3 | import Loader from 'react-loader'; | 3 | import Loader from 'react-loader'; |
4 | 4 | ||
@@ -9,31 +9,30 @@ interface IProps { | |||
9 | color?: string; | 9 | color?: string; |
10 | loaded?: boolean; | 10 | loaded?: boolean; |
11 | stores?: FerdiumStores; | 11 | stores?: FerdiumStores; |
12 | children?: ReactNode; | ||
12 | } | 13 | } |
13 | 14 | ||
14 | // Can this file be merged into the './loader/index.tsx' file? | 15 | // Can this file be merged into the './loader/index.tsx' file? |
15 | @inject('stores') | 16 | @inject('stores') |
16 | @observer | 17 | @observer |
17 | class LoaderComponent extends Component<PropsWithChildren<IProps>> { | 18 | class LoaderComponent extends Component<IProps> { |
18 | static defaultProps = { | 19 | render(): ReactElement { |
19 | loaded: false, | 20 | const { |
20 | color: 'ACCENT', | 21 | loaded = false, |
21 | }; | 22 | color = 'ACCENT', |
23 | className, | ||
24 | children, | ||
25 | } = this.props; | ||
22 | 26 | ||
23 | render() { | 27 | const loaderColor = |
24 | const { children, loaded, className } = this.props; | 28 | color !== 'ACCENT' ? color : this.props.stores!.settings.app.accentColor; |
25 | |||
26 | const color = | ||
27 | this.props.color !== 'ACCENT' | ||
28 | ? this.props.color | ||
29 | : this.props.stores!.settings.app.accentColor; | ||
30 | 29 | ||
31 | return ( | 30 | return ( |
32 | <Loader | 31 | <Loader |
33 | loaded={loaded} | 32 | loaded={loaded} |
34 | width={4} | 33 | width={4} |
35 | scale={0.6} | 34 | scale={0.6} |
36 | color={color} | 35 | color={loaderColor} |
37 | component="span" | 36 | component="span" |
38 | className={className} | 37 | className={className} |
39 | > | 38 | > |