improve workspace switching ux

3 files changed, 62 insertions, 5 deletions

diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 27bf08361..c9c4d3bc9 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -54,7 +54,8 @@ class WorkspaceDrawer extends Component {
       getServicesForWorkspace,
     } = this.props;
     const { intl } = this.context;
-
+    const { activeWorkspace, isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace;
     return (
       <div className={classes.drawer}>
         <H1 className={classes.headline}>
@@ -74,13 +75,13 @@ class WorkspaceDrawer extends Component {
             name={intl.formatMessage(messages.allServices)}
             onClick={() => workspaceActions.deactivate()}
             services={getServicesForWorkspace(null)}
-            isActive={workspacesState.activeWorkspace == null}
+            isActive={actualWorkspace == null}
           />
           {workspacesState.workspaces.map(workspace => (
             <WorkspaceDrawerItem
               key={workspace.id}
               name={workspace.name}
-              isActive={workspacesState.activeWorkspace === workspace}
+              isActive={actualWorkspace === workspace}
               onClick={() => workspaceActions.activate({ workspace })}
               services={getServicesForWorkspace(workspace)}
             />
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
new file mode 100644
index 000000000..4a279afaf
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { workspacesState } from '../state';
+import LoaderComponent from '../../../components/ui/Loader';
+
+const styles = () => ({
+  wrapper: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    position: 'absolute',
+    width: '100%',
+    marginTop: '20px',
+  },
+  component: {
+    background: 'rgba(20, 20, 20, 0.4)',
+    padding: 20,
+    width: 'auto',
+    height: 'auto',
+    margin: [0, 'auto'],
+    borderRadius: 6,
+    alignItems: 'flex-start',
+    zIndex: 200,
+  },
+  name: {
+    fontSize: 35,
+    marginBottom: '10px',
+  },
+});
+
+@injectSheet(styles) @observer
+class WorkspaceSwitchingIndicator extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    if (!isSwitchingWorkspace) return null;
+    const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
+    return (
+      <div className={classes.wrapper}>
+        <div className={classes.component}>
+          <h1 className={classes.name}>
+            {`Switching to ${nextWorkspaceName}`}
+          </h1>
+          <LoaderComponent />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspaceSwitchingIndicator;
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 917807302..df35b3590 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -30,7 +30,7 @@ const styles = () => ({
 class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    isLoading: PropTypes.bool.isRequired,
+    isLoadingWorkspaces: PropTypes.bool.isRequired,
     onCreateWorkspaceSubmit: PropTypes.func.isRequired,
     onWorkspaceClick: PropTypes.func.isRequired,
     workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -60,7 +60,7 @@ class WorkspacesDashboard extends Component {
             <div className={classes.createForm}>
               <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
             </div>
-            {isLoading ? (
+            {isLoadingWorkspaces ? (
               <Loader />
             ) : (
               <table className="workspace-table">