improve workspace switching ux

12 files changed, 112 insertions, 31 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index e06192f87..284a2523a 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -15,6 +15,8 @@ import ErrorBoundary from '../util/ErrorBoundary';
 
 import { isWindows } from '../../environment';
 import { workspacesState } from '../../features/workspaces/state';
+import FullscreenLoader from '../ui/FullscreenLoader';
+import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -123,6 +125,7 @@ class AppLayout extends Component {
               {workspacesDrawer}
               {sidebar}
               <div className="app__service">
+                <WorkspaceSwitchingIndicator />
                 {news.length > 0 && news.map(item => (
                   <InfoBar
                     key={item.id}
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 6ecf4d395..06dab1eb6 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -16,13 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
     theme: PropTypes.object.isRequired,
     spinnerColor: PropTypes.string,
     children: PropTypes.node,
-  }
+  };
 
   static defaultProps = {
     className: null,
     spinnerColor: null,
     children: null,
-  }
+  };
 
   render() {
     const {
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 3a3dbbe49..d200b8193 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -11,7 +11,7 @@ export default @observer @injectSheet(styles) class WebviewLoader extends Compon
   static propTypes = {
     name: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,
-  }
+  };
 
   render() {
     const { classes, name } = this.props;
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">
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 94e714255..99241210e 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -21,7 +21,7 @@ class WorkspacesScreen extends Component {
       <ErrorBoundary>
         <WorkspacesDashboard
           workspaces={workspacesState.workspaces}
-          isLoading={workspacesState.isLoading}
+          isLoading={workspacesState.isLoadingWorkspaces}
           onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
           onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
         />
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.js
index 26cadea64..1644c0e2f 100644
--- a/src/features/workspaces/index.js
+++ b/src/features/workspaces/index.js
@@ -8,10 +8,13 @@ const debug = require('debug')('Franz:feature:workspaces');
 let store = null;
 
 export const filterServicesByActiveWorkspace = (services) => {
-  const { isFeatureActive, activeWorkspace } = workspacesState;
-  if (isFeatureActive && activeWorkspace) {
-    return services.filter(s => activeWorkspace.services.includes(s.id));
-  }
+  const {
+    activeWorkspace,
+    isFeatureActive,
+  } = workspacesState;
+
+  if (!isFeatureActive) return services;
+  if (activeWorkspace) return services.filter(s => activeWorkspace.services.includes(s.id));
   return services;
 };
 
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
index 68a7d8d91..c916480c0 100644
--- a/src/features/workspaces/state.js
+++ b/src/features/workspaces/state.js
@@ -2,8 +2,10 @@ import { observable } from 'mobx';
 
 const defaultState = {
   activeWorkspace: null,
-  isLoading: false,
+  nextWorkspace: null,
+  isLoadingWorkspaces: false,
   isFeatureActive: false,
+  isSwitchingWorkspace: false,
   isWorkspaceDrawerOpen: false,
   workspaces: [],
   workspaceBeingEdited: null,
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 1b57ba2da..f6b9b2ff4 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -31,7 +31,7 @@ export default class WorkspacesStore extends Store {
      */
     reaction(
       () => this.allWorkspacesRequest.isExecuting,
-      isExecuting => this._setIsLoading(isExecuting),
+      isExecuting => this._setIsLoadingWorkspaces(isExecuting),
     );
     /**
      * Update the state with the workspace to be edited when route matches.
@@ -66,8 +66,8 @@ export default class WorkspacesStore extends Store {
     this.state.workspaces = workspaces.map(data => new Workspace(data));
   };
 
-  @action _setIsLoading = (isLoading) => {
-    this.state.isLoading = isLoading;
+  @action _setIsLoadingWorkspaces = (isLoading) => {
+    this.state.isLoadingWorkspaces = isLoading;
   };
 
   @action _edit = ({ workspace }) => {
@@ -107,11 +107,26 @@ export default class WorkspacesStore extends Store {
   };
 
   @action _setActiveWorkspace = ({ workspace }) => {
-    this.state.activeWorkspace = workspace;
+    Object.assign(this.state, {
+      isSwitchingWorkspace: true,
+      nextWorkspace: workspace,
+    });
+    setTimeout(() => { this.state.activeWorkspace = workspace; }, 100);
+    setTimeout(() => {
+      Object.assign(this.state, {
+        isSwitchingWorkspace: false,
+        nextWorkspace: null,
+      });
+    }, 1000);
   };
 
   @action _deactivateActiveWorkspace = () => {
-    this.state.activeWorkspace = null;
+    Object.assign(this.state, {
+      isSwitchingWorkspace: true,
+      nextWorkspace: null,
+    });
+    setTimeout(() => { this.state.activeWorkspace = null; }, 100);
+    setTimeout(() => { this.state.isSwitchingWorkspace = false; }, 1000);
   };
 
   @action _toggleWorkspaceDrawer = () => {
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 85d3e8696..4dd354afc 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 24,
+      "line": 26,
       "column": 19
     },
     "end": {
-      "line": 27,
+      "line": 29,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!A new update for Franz is available.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 28,
+      "line": 30,
       "column": 19
     },
     "end": {
-      "line": 31,
+      "line": 33,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 32,
+      "line": 34,
       "column": 24
     },
     "end": {
-      "line": 35,
+      "line": 37,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 36,
+      "line": 38,
       "column": 13
     },
     "end": {
-      "line": 39,
+      "line": 41,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 40,
+      "line": 42,
       "column": 23
     },
     "end": {
-      "line": 43,
+      "line": 45,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 44,
+      "line": 46,
       "column": 26
     },
     "end": {
-      "line": 47,
+      "line": 49,
       "column": 3
     }
   }
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 78e9e68f1..e858b7904 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -39,6 +39,7 @@ html { overflow: hidden; }
   .app__content { display: flex; }
 
   .app__service {
+    position: relative;
     display: flex;
     flex: 1;
     flex-direction: column;