3 files changed, 17 insertions, 8 deletions

diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 48111d22b..d0493b82f 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -196,6 +196,9 @@ export const workspaces = {
       },
     },
   },
+  switchingIndicator: {
+    spinnerColor: 'white',
+  },
 };
 
 // export const workspaceSettings = {
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index 46545c786..4a3c8274f 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -8,6 +8,7 @@ import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
   className?: string;
+  color?: string;
 }
 
 const styles = (theme: Theme) => ({
@@ -22,6 +23,7 @@ class LoaderComponent extends Component<IProps> {
     const {
       classes,
       className,
+      color,
       theme,
     } = this.props;
 
@@ -37,7 +39,7 @@ class LoaderComponent extends Component<IProps> {
           loaded={false}
           width={4}
           scale={0.75}
-          color={theme.colorText}
+          color={color || theme.colorText}
           parentClassName={classes.loader}
         />
       </div>
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index ded6b8f2a..c4a800a7b 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
+import { Loader } from '@meetfranz/ui';
 import { defineMessages, intlShape } from 'react-intl';
 
-import LoaderComponent from '../../../components/ui/Loader';
 import { workspaceStore } from '../index';
 
 const messages = defineMessages({
@@ -39,12 +39,14 @@ const styles = theme => ({
     zIndex: 200,
   },
   spinner: {
-    width: '40px',
-    marginRight: '5px',
+    width: 40,
+    height: 40,
+    marginRight: 10,
   },
   message: {
     fontSize: 16,
     whiteSpace: 'nowrap',
+    color: theme.colorAppLoaderSpinner,
   },
 });
 
@@ -52,6 +54,7 @@ const styles = theme => ({
 class WorkspaceSwitchingIndicator extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
@@ -59,7 +62,7 @@ class WorkspaceSwitchingIndicator extends Component {
   };
 
   render() {
-    const { classes } = this.props;
+    const { classes, theme } = this.props;
     const { intl } = this.context;
     const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
@@ -72,9 +75,10 @@ class WorkspaceSwitchingIndicator extends Component {
         ])}
       >
         <div className={classes.component}>
-          <div className={classes.spinner}>
-            <LoaderComponent />
-          </div>
+          <Loader
+            className={classes.spinner}
+            color={theme.workspaces.switchingIndicator.spinnerColor}
+          />
           <p className={classes.message}>
             {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`}
           </p>