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>

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 @@
 import classnames from 'classnames';
 import { Component } from 'react';
 import injectStyle, { WithStylesProps } from 'react-jss';
-import ReactLoader from 'react-loader';
-import { Theme } from '../../../themes';
+import { Oval } from 'react-loader-spinner';
+import { inject } from 'mobx-react';
+import { FerdiumStores } from '../../../@types/stores.types';
 
-const styles = (theme: Theme) => ({
+const styles = () => ({
   container: {
     position: 'relative',
-    height: 60,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 'inherit',
   },
-  loader: {},
-  color: theme.colorText,
 });
 
 interface IProps extends WithStylesProps<typeof styles> {
   className?: string;
   color?: string;
+  size?: number;
+  loaded?: boolean;
+  stores?: FerdiumStores;
 }
 
+@inject('stores')
 class LoaderComponent extends Component<IProps> {
   render() {
-    const { classes, className, color } = this.props;
+    const {
+      classes,
+      className,
+      size = 36,
+      color = this.props.stores?.settings.app.accentColor,
+      loaded = false,
+    } = this.props;
+    const loaderColor = color || '#FFFFFF';
 
     return (
       <div
@@ -30,13 +43,13 @@ class LoaderComponent extends Component<IProps> {
         })}
         data-type="franz-loader"
       >
-        <ReactLoader
-          loaded={false}
-          width={4}
-          scale={0.75}
-          color={color || classes.color}
-          // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps></LoaderProps>
-          parentClassName={classes.loader}
+        <Oval
+          strokeWidth={5}
+          color={loaderColor}
+          secondaryColor={loaderColor}
+          height={size}
+          width={size}
+          visible={!loaded}
         />
       </div>
     );