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, 8 insertions, 10 deletions

diff --git a/src/components/ui/InfoBar.tsx b/src/components/ui/InfoBar.tsx
index b7bfe0fa6..ae37546df 100644
--- a/src/components/ui/InfoBar.tsx
+++ b/src/components/ui/InfoBar.tsx
@@ -1,11 +1,11 @@
 import { Component, MouseEventHandler, ReactNode } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Loader from 'react-loader';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { mdiClose } from '@mdi/js';
 import { noop } from 'lodash';
+import Loader from './loader/index';
 import Appear from './effects/Appear';
 import Icon from './icon';
 
@@ -67,15 +67,13 @@ class InfoBar extends Component<IProps> {
           {children}
           {ctaLabel && (
             <button type="button" className="info-bar__cta" onClick={onClick}>
-              <Loader
-                loaded={!ctaLoading}
-                lines={10}
-                scale={0.3}
-                color="#FFF"
-                // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>
-                component="span"
-              />
-              {ctaLabel}
+              <div
+                className="contentWrapper"
+                style={{ display: 'flex', gap: '8px' }}
+              >
+                <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" />
+                {ctaLabel}
+              </div>
             </button>
           )}
           {!sticky && (