A skeleton loading experiment

Author: CompuIves

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

@@ -86,6 +86,7 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
 
   state.editor.isLoading = !hasExistingSandbox;
   state.editor.notFound = false;
+  state.editor.currentId = newId;
 
   try {
     const sandbox = await effects.api.getSandbox(newId);

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

@@ -120,7 +120,25 @@ export const state: State = {
     devToolIndex: 0,
     tabPosition: 0,
   },
-  currentSandbox: ({ sandboxes, currentId }) => sandboxes[currentId],
+  currentSandbox: ({ sandboxes, currentId }) => {
+    if (!currentId) {
+      return undefined;
+    }
+
+    if (sandboxes[currentId]) {
+      return sandboxes[currentId];
+    }
+
+    return {
+      id: currentId,
+      alias: '',
+      title: '',
+      description: '',
+      modules: [],
+      directories: [],
+      privacy: 0,
+    };
+  },
   isAllModulesSynced: ({ changedModuleShortids }) =>
     !changedModuleShortids.length,
   currentModule: ({ currentSandbox, currentModuleShortid }) =>

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

@@ -115,7 +115,7 @@ export const Sandbox: React.FC<Props> = ({ match }) => {
       return <NotFound />;
     }
 
-    if (state.editor.isLoading || !state.editor.currentSandbox) {
+    if (!state.editor.currentId) {
       return (
         <>
           <Skeleton