small ux fixes and allow awaiting vscode effect

Author: christianalfoni

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -72,8 +72,8 @@ const context: any = window;
  * parts.
  */
 export class VSCodeEffect {
-  // We should not need this as we load VSCode at effects level
-  // private serviceCache: IServiceCache;
+  public initialized: Promise<void>;
+
   private monaco: any;
   private editorApi: any;
   private options: VsCodeOptions;
@@ -118,7 +118,7 @@ export class VSCodeEffect {
     // It will only load the editor once. We should probably call this
     const container = this.elements.editor;
 
-    return Promise.all([
+    this.initialized = Promise.all([
       new Promise(resolve => {
         loadScript(['vs/editor/codesandbox.editor.main'])(resolve);
       }),
@@ -133,6 +133,8 @@ export class VSCodeEffect {
         getState: options.getState,
       }),
     ]).then(() => this.loadEditor(window.monaco, container));
+
+    return this.initialized;
   }
 
   public getEditorElement(

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -118,6 +118,10 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
     actions.files.internal.recoverFiles();
   }
 
+  await effects.vscode.initialized;
+
+  effects.vscode.openModule(state.editor.currentModule);
+
   state.editor.isLoading = false;
 });
 

packages/app/src/app/pages/Sandbox/Editor/Content/index.tsx

@@ -185,24 +185,25 @@ export const Content: React.FC = () => {
                 bottom: 0,
               }}
             >
-              <Icons>
-                {config && config.partialSupportDisclaimer ? (
-                  <Tooltip
-                    placement="bottom"
-                    content={config.partialSupportDisclaimer}
-                    style={{
-                      display: 'flex',
-                      'align-items': 'center',
-                    }}
-                  >
-                    Partially Supported Config{' '}
-                    <QuestionIcon style={{ marginLeft: '.5rem' }} />
-                  </Tooltip>
-                ) : null}
-                {config && !config.partialSupportDisclaimer ? (
-                  <div>Supported Configuration</div>
-                ) : null}
-              </Icons>
+              {config ? (
+                <Icons>
+                  {config.partialSupportDisclaimer ? (
+                    <Tooltip
+                      placement="bottom"
+                      content={config.partialSupportDisclaimer}
+                      style={{
+                        display: 'flex',
+                        'align-items': 'center',
+                      }}
+                    >
+                      Partially Supported Config{' '}
+                      <QuestionIcon style={{ marginLeft: '.5rem' }} />
+                    </Tooltip>
+                  ) : (
+                    <div>Supported Configuration</div>
+                  )}
+                </Icons>
+              ) : null}
               <CodeEditor key={sandbox.id} />
             </div>
           </div>

packages/app/src/app/pages/Sandbox/index.js

@@ -1,18 +1,19 @@
-import React from 'react';
-import Helmet from 'react-helmet';
-import { Link } from 'react-router-dom';
-import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
 import Padding from '@codesandbox/common/lib/components/spacing/Padding';
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { inject, observer } from 'app/componentConnectors';
-import { Title } from 'app/components/Title';
 import { Skeleton } from 'app/components/Skeleton';
-import { QuickActions } from 'app/pages/Sandbox/QuickActions';
-import { NotFound } from 'app/pages/common/NotFound';
-import { Navigation } from 'app/pages/common/Navigation';
+import { Title } from 'app/components/Title';
 import { GithubIntegration } from 'app/pages/common/GithubIntegration';
+import { Navigation } from 'app/pages/common/Navigation';
+import { NotFound } from 'app/pages/common/NotFound';
+import { QuickActions } from 'app/pages/Sandbox/QuickActions';
+import React from 'react';
+import Helmet from 'react-helmet';
+import { Link } from 'react-router-dom';
+
 import Editor from './Editor';
 
 class SandboxPage extends React.Component {
@@ -158,7 +159,9 @@ class SandboxPage extends React.Component {
             }}
             margin={1}
           >
-            <Navigation title="Sandbox Editor" />
+            {store.editor.isLoading ? null : (
+              <Navigation title="Sandbox Editor" />
+            )}
             <Centered
               style={{ flex: 1, width: '100%', height: '100%' }}
               horizontal