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>

11 files changed, 60 insertions, 113 deletions

diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx
index de323c06e..ffa684458 100644
--- a/src/components/settings/account/AccountDashboard.tsx
+++ b/src/components/settings/account/AccountDashboard.tsx
@@ -4,7 +4,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import { H1, H2 } from '../../ui/headline';
 
-import Loader from '../../ui/Loader';
+import Loader from '../../ui/loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/infobox/index';
 import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config';
@@ -123,7 +123,7 @@ class AccountDashboard extends Component<IProp> {
           )}
           {!isUsingWithoutAccount && (
             <>
-              {isLoading && <Loader />}
+              {isLoading && <Loader color="#FFFFFF" />}
 
               {!isLoading && userInfoRequestFailed && (
                 <Infobox
diff --git a/src/components/settings/recipes/RecipesDashboard.tsx b/src/components/settings/recipes/RecipesDashboard.tsx
index 7b7ba19b1..c7aeaa9b3 100644
--- a/src/components/settings/recipes/RecipesDashboard.tsx
+++ b/src/components/settings/recipes/RecipesDashboard.tsx
@@ -10,7 +10,7 @@ import { H1, H2, H3 } from '../../ui/headline';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/infobox/index';
 import RecipeItem from './RecipeItem';
-import Loader from '../../ui/Loader';
+import Loader from '../../ui/loader';
 import Appear from '../../ui/effects/Appear';
 import { FERDIUM_SERVICE_REQUEST } from '../../../config';
 import RecipePreview from '../../../models/RecipePreview';
@@ -219,7 +219,7 @@ class RecipesDashboard extends Component<IProps, IState> {
               <Icon icon={mdiOpenInNew} />
             </a>
           </div>
-          {/* )} */}
+
           {isLoading ? (
             <Loader />
           ) : (
diff --git a/src/components/settings/services/ServicesDashboard.tsx b/src/components/settings/services/ServicesDashboard.tsx
index d64779a36..b8c3ce3f0 100644
--- a/src/components/settings/services/ServicesDashboard.tsx
+++ b/src/components/settings/services/ServicesDashboard.tsx
@@ -5,7 +5,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { To } from 'history';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
-import Loader from '../../ui/Loader';
+import Loader from '../../ui/loader';
 import FAB from '../../ui/FAB';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx
index 77bccb8c3..406656160 100644
--- a/src/components/settings/team/TeamDashboard.tsx
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -6,7 +6,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-import Loader from '../../ui/Loader';
+import Loader from '../../ui/loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/Infobox';
 import { H1 } from '../../ui/headline';
@@ -128,7 +128,7 @@ class TeamDashboard extends Component<IProps> {
           </span>
         </div>
         <div className="settings__body">
-          {isLoading && <Loader />}
+          {isLoading && <Loader color="#FFFFFF" />}
 
           {!isLoading && userInfoRequestFailed && (
             <Infobox
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,
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 && (
diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx
index a794a5e9b..742717ed7 100644
--- a/src/components/ui/Infobox.tsx
+++ b/src/components/ui/Infobox.tsx
@@ -1,10 +1,10 @@
 import { Component, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import classnames from 'classnames';
-import Loader from 'react-loader';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js';
 import { noop } from 'lodash';
 import { observer } from 'mobx-react';
+import Loader from './loader/index';
 import Icon from './icon';
 
 const icons = {
@@ -80,15 +80,13 @@ class Infobox extends Component<IProps, IState> {
         <div className="infobox__content">{children}</div>
         {ctaLabel && (
           <button className="infobox__cta" onClick={ctaOnClick} type="button">
-            <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>
         )}
         {dismissible && (
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
deleted file mode 100644
index d4457ae5f..000000000
--- a/src/components/ui/Loader.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Component, ReactElement, ReactNode } from 'react';
-import { observer, inject } from 'mobx-react';
-import Loader from 'react-loader';
-
-import { FerdiumStores } from '../../@types/stores.types';
-
-interface IProps {
-  className?: string;
-  color?: string;
-  loaded?: boolean;
-  stores?: FerdiumStores;
-  children?: ReactNode;
-}
-
-// TODO: Can this file be merged into the './loader/index.tsx' file?
-@inject('stores')
-@observer
-class LoaderComponent extends Component<IProps> {
-  render(): ReactElement {
-    const {
-      loaded = false,
-      color = 'ACCENT',
-      className,
-      children,
-    } = this.props;
-
-    const loaderColor =
-      color === 'ACCENT' ? this.props.stores!.settings.app.accentColor : color;
-
-    return (
-      // @ts-expect-error Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>'
-      <Loader
-        loaded={loaded}
-        width={4}
-        scale={0.6}
-        color={loaderColor}
-        component="span"
-        className={className}
-      >
-        {children}
-      </Loader>
-    );
-  }
-}
-
-export default LoaderComponent;
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}
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>
     );