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, 6 insertions, 21 deletions

diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index c37a88afa..f8bcf76b2 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -5,7 +5,7 @@ import { Property } from 'csstype';
 import { noop } from 'lodash';
 import { Component, MouseEventHandler } from 'react';
 import withStyles, { WithStylesProps } from 'react-jss';
-import Loader from 'react-loader';
+import Loader from '../loader/index';
 import { Theme } from '../../../themes';
 import { IFormField } from '../typings/generic';
 
@@ -111,16 +111,8 @@ const styles = (theme: Theme) => ({
   disabled: {
     opacity: theme.inputDisabledOpacity,
   },
-  loader: {
-    position: 'relative' as Property.Position,
-    width: 20,
-    height: 18,
-    zIndex: 9999,
-  },
   loaderContainer: {
-    width: (props: IProps): string => (props.busy ? '40px' : '0'),
     height: 20,
-    overflow: 'hidden',
     transition: loaderContainerTransition,
     marginLeft: (props: IProps): number => (props.busy ? 20 : 10),
     marginRight: (props: IProps): number => (props.busy ? -20 : -10),
@@ -200,18 +192,11 @@ class ButtonComponent extends Component<IProps, IState> {
 
     const content = (
       <>
-        <div className={classes.loaderContainer}>
-          {showLoader && (
-            <Loader
-              loaded={false}
-              width={4}
-              scale={0.45}
-              // color={theme.buttonLoaderColor[buttonType!]}
-              // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>
-              parentClassName={classes.loader}
-            />
-          )}
-        </div>
+        {showLoader && (
+          <div className={classes.loaderContainer}>
+            <Loader size={18} color="#FFFFFF" />
+          </div>
+        )}
         <div className={classes.label}>
           {icon && <Icon path={icon} size={0.8} className={classes.icon} />}
           {label}