fix(App): Improve layout rendering of services

Author: adlk

src/components/layout/AppLayout.js

@@ -15,6 +15,7 @@ import Todos from '../../features/todos/containers/TodosScreen';
 import TrialStatusBar from '../../features/trialStatusBar/containers/TrialStatusBarScreen';
 import WebControlsScreen from '../../features/webControls/containers/WebControlsScreen';
 import Service from '../../models/Service';
+import { workspaceStore } from '../../features/workspaces';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -109,7 +110,6 @@ class AppLayout extends Component {
             {workspacesDrawer}
             {sidebar}
             <div className="app__service">
-              <WorkspaceSwitchingIndicator />
               {news.length > 0 && news.map(item => (
                 <InfoBar
                   key={item.id}
@@ -133,16 +133,16 @@ class AppLayout extends Component {
                 <TrialActivationInfoBar />
               )}
               {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-              <InfoBar
-                type="danger"
-                ctaLabel="Try again"
-                ctaLoading={areRequiredRequestsLoading}
-                sticky
-                onClick={retryRequiredRequests}
-              >
-                <span className="mdi mdi-flash" />
-                {intl.formatMessage(messages.requiredRequestsFailed)}
-              </InfoBar>
+                <InfoBar
+                  type="danger"
+                  ctaLabel="Try again"
+                  ctaLoading={areRequiredRequestsLoading}
+                  sticky
+                  onClick={retryRequiredRequests}
+                >
+                  <span className="mdi mdi-flash" />
+                  {intl.formatMessage(messages.requiredRequestsFailed)}
+                </InfoBar>
               )}
               {showServicesUpdatedInfoBar && (
                 <InfoBar
@@ -165,11 +165,16 @@ class AppLayout extends Component {
                 />
               )}
               {isDelayAppScreenVisible ? <DelayApp /> : (
-                <div className="app__service-size-container">
-                  {services}
-                  {children}
-                  <Todos />
-                </div>
+                <>
+                  <WorkspaceSwitchingIndicator />
+                  {!workspaceStore.isSwitchingWorkspace && (
+                    <div className="app__service-size-container">
+                      {services}
+                      {children}
+                      <Todos />
+                    </div>
+                  )}
+                </>
               )}
               <TrialStatusBar />
             </div>

src/components/services/content/Services.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
@@ -25,6 +25,7 @@ const messages = defineMessages({
 const styles = {
   container: {
     display: 'flex',
+    flex: 1,
 
     '&>span': {
       display: 'block',
@@ -51,23 +52,6 @@ export default @injectSheet(styles) @observer class Services extends Component {
     intl: intlShape,
   };
 
-  serviceContainerRef = React.createRef()
-
-  resizeObserver = new window.ResizeObserver(([element]) => {
-    const bounds = element.target.getBoundingClientRect();
-
-    ipcRenderer.send(RESIZE_SERVICE_VIEWS, {
-      width: bounds.width,
-      height: bounds.height,
-      x: bounds.x,
-      y: element.target.offsetTop,
-    });
-  });
-
-  componentDidMount() {
-    this.resizeObserver.observe(this.serviceContainerRef.current);
-  }
-
   componentWillUnmount() {
     if (this._confettiTimeout) {
       clearTimeout(this._confettiTimeout);
@@ -127,10 +111,31 @@ export default @injectSheet(styles) @observer class Services extends Component {
                 upgrade={() => openSettings({ path: 'user' })}
               />
             )}
+            <ResizeBWServiceComponent />
           </>
         )}
-        <div className="services" ref={this.serviceContainerRef} />
       </>
     );
   }
 }
+
+const resizeObserver = new window.ResizeObserver(([element]) => {
+  const bounds = element.target.getBoundingClientRect();
+
+  ipcRenderer.send(RESIZE_SERVICE_VIEWS, {
+    width: bounds.width,
+    height: bounds.height,
+    x: bounds.x,
+    y: element.target.offsetTop,
+  });
+});
+
+const ResizeBWServiceComponent = () => {
+  const serviceContainerRef = useRef();
+
+  useEffect(() => {
+    resizeObserver.observe(serviceContainerRef.current);
+  }, [serviceContainerRef]);
+
+  return <div className="services" ref={serviceContainerRef} />;
+};