Remove loading indicator for sandboxes (codesandbox#2251)

* Loading indicator for sandboxes

* Fix by letting updateSandbox update the module

* Fix pressing back after loading sandbox

Author: CompuIves

packages/app/src/app/components/CodeEditor/VSCode/index.tsx

@@ -511,8 +511,7 @@ class MonacoEditor extends React.Component<Props> implements Editor {
     errors?: ModuleError[],
     corrections?: ModuleCorrection[]
   ) => {
-    const oldModule = this.currentModule;
-    this.swapDocuments(oldModule, newModule);
+    this.swapDocuments(newModule);
 
     this.currentModule = newModule;
     this.currentTitle = newModule.title;
@@ -594,8 +593,8 @@ class MonacoEditor extends React.Component<Props> implements Editor {
   ): Promise<null> =>
     new Promise(resolve => {
       this.sandbox = newSandbox;
-      this.currentModule = newCurrentModule;
       this.dependencies = dependencies;
+      this.changeModule(newCurrentModule, [], []);
 
       // Do in setTimeout, since disposeModules is async
       setTimeout(() => {
@@ -983,13 +982,13 @@ class MonacoEditor extends React.Component<Props> implements Editor {
         module.id
       );
 
-      if (this.getCurrentModelPath() !== path) {
+      if (path && this.getCurrentModelPath() !== path) {
         this.editor.openFile(path);
       }
     }
   };
 
-  swapDocuments = (currentModule: Module, nextModule: Module) => {
+  swapDocuments = (nextModule: Module) => {
     this.openModule(nextModule);
   };
 

packages/app/src/app/components/CodeEditor/types.js

@@ -58,6 +58,7 @@ export interface Editor {
   ) => any;
   changeCode?: (code: string, moduleId?: string) => any;
   currentModule?: Module;
+  sandbox?: Sandbox;
   setTSConfig?: (tsConfig: Object) => void;
   setReceivingCode?: (receivingCode: boolean) => void;
   applyOperations?: (operations: { [moduleShortid: string]: any }) => void;

packages/app/src/app/components/CodeEditor/types.ts

@@ -61,6 +61,7 @@ export interface Editor {
   ) => any;
   changeCode?: (code: string, moduleId?: string) => any;
   currentModule?: Module;
+  sandbox?: Sandbox;
   setTSConfig?: (tsConfig: Object) => void;
   setReceivingCode?: (receivingCode: boolean) => void;
   applyOperations?: (operations: { [moduleShortid: string]: any }) => void;

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

@@ -295,13 +295,25 @@ class EditorPreview extends React.Component<Props, State> {
         }
 
         const editorModule = editor.currentModule;
+        const currentSandbox = editor.sandbox;
         const changeModule = editor.changeModule;
         if (
           (!editorModule || newModule.id !== editorModule.id) &&
           changeModule
         ) {
           const errors = store.editor.errors.map(e => e);
           const corrections = store.editor.corrections.map(e => e);
+
+          if (
+            currentSandbox.id !== store.editor.currentSandbox.id &&
+            editor.changeSandbox
+          ) {
+            // This means that the sandbox will be updated soon in the editor itself, which will
+            // cause the module to change anyway. We don't want to continue here because the new sandbox
+            // has not yet been initialized in the editor, but it's trying already to update the module.
+            return;
+          }
+
           changeModule(newModule, errors, corrections);
         } else if (editor.changeCode) {
           // Only code changed from outside the editor

packages/app/src/app/store/sequences.js

@@ -138,6 +138,7 @@ export const setSandbox = [
   {
     true: [],
     false: [
+      set(props`oldId`, state`editor.currentId`),
       set(state`editor.currentId`, props`sandbox.id`),
       actions.setCurrentModuleShortid,
       actions.setMainModuleShortid,
@@ -149,6 +150,11 @@ export const setSandbox = [
       resetServerState,
       setupExecutor,
       syncFilesToFS,
+
+      // Remove the old sandbox because it's stale with the changes the user did on it (for example,
+      // the user might have changed code of a file and then forked. We didn't revert the code back
+      // to its old state so if the user opens this sandbox again it shows wrong code)
+      unset(state`editor.sandboxes.${props`oldId`}`),
     ],
   },
 ];