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>

2 files changed, 4 insertions, 5 deletions

diff --git a/src/components/ui/FullscreenLoader/index.tsx b/src/components/ui/FullscreenLoader/index.tsx
index 002ee7932..09c1d5fbb 100644
--- a/src/components/ui/FullscreenLoader/index.tsx
+++ b/src/components/ui/FullscreenLoader/index.tsx
@@ -2,7 +2,7 @@ import { Component, ReactElement, ReactNode } from 'react';
 import { observer } from 'mobx-react';
 import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-import Loader from '../Loader';
+import Loader from '../loader/index';
 import styles from './styles';
 import { H1 } from '../headline';
 import { Theme } from '../../../themes';
@@ -21,7 +21,7 @@ class FullscreenLoader extends Component<IProps> {
   render(): ReactElement {
     const {
       classes,
-      theme = '',
+      theme,
       className = '',
       spinnerColor = '',
       children = null,
@@ -39,9 +39,7 @@ class FullscreenLoader extends Component<IProps> {
         >
           <H1 className={classes.title}>{title}</H1>
           <Loader
-            color={
-              spinnerColor || (theme && theme.colorFullscreenLoaderSpinner)
-            }
+            color={spinnerColor || theme?.colorFullscreenLoaderSpinner}
             loaded={loaded}
           />
           {children && <div className={classes.content}>{children}</div>}
diff --git a/src/components/ui/FullscreenLoader/styles.ts b/src/components/ui/FullscreenLoader/styles.ts
index 64d24e4ce..9a1b24400 100644
--- a/src/components/ui/FullscreenLoader/styles.ts
+++ b/src/components/ui/FullscreenLoader/styles.ts
@@ -12,6 +12,7 @@ export default {
     alignItems: 'center',
     textAlign: 'center',
     height: 'auto',
+    gap: 8,
   },
   title: {
     fontSize: 35,