diff options
author | 2023-10-27 02:19:31 +0200 | |
---|---|---|
committer | 2023-10-27 01:19:31 +0100 | |
commit | 78cb67c641e5723af59e0cf8a172a443aafa6f33 (patch) | |
tree | ec121e8efecf027717ce4e58b29c72fa93ed3315 /src/components/ui/loader/index.tsx | |
parent | 6.5.3-nightly.4 [skip ci] (diff) | |
download | ferdium-app-78cb67c641e5723af59e0cf8a172a443aafa6f33.tar.gz ferdium-app-78cb67c641e5723af59e0cf8a172a443aafa6f33.tar.zst ferdium-app-78cb67c641e5723af59e0cf8a172a443aafa6f33.zip |
feat: change loader component (#1410)
* CHANGED react-loater to react-loader-spinner
* CHANGED brandColor to primary
* feat: change loader component
- remove redundant /index path from Loader imports in multiple files
- remove commented out braces in RecipesDashboard
- remove redundant color which is default from Loader in InfoBar
- update size of Loader in InfoBar to be the same as InfoBox
- change passed size prop from string to number in Button component
- add slight gap for FullscreenLoader to styles.ts
- fix Loader to check for color primary which is passed rather than brandColor
- remove hardcoded width and height from WorkspaceSwitchingIndicator which lead to elements not being vertically centered
- remove color prop from Loader in WorkspaceSwitchingIndicator since white is already the default
- remove switchingIndicator.spinnerColor from default theme since white is already the default
* implement PR feedback
* re-add color to WorkspaceSwitchingIndicator
---------
Co-authored-by: MCMXC <16797721+mcmxcdev@users.noreply.github.com>
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 | ); |