Skeleton (codesandbox#3583)

* initial run

* skeleton stuff

* fix jumping of sandboxname

* preview

* fade in

* fadein for sandboxname and actions

* make skeleton sidebar experiment

* work without new design

* Add bg color of sidebar

* Tweak default colors

* fix owned bug

* Fix dot-object mutating the existing themes

Because with skeleton we load the app before we write the themes to the extensions, the theme will be mutated before we write it. This causes VSCode to ignore all properties and write to the default theme.

Co-authored-by: Ives van Hoorne <[email protected]>

Author: christianalfoni

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

@@ -10,10 +10,10 @@ import {
 } from '@codesandbox/common/lib/types';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 import { COMMENTS } from '@codesandbox/common/lib/utils/feature-flags';
-import { convertTypeToStatus } from '@codesandbox/common/lib/utils/notifications';
 import { hasPermission } from '@codesandbox/common/lib/utils/permission';
-import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { convertTypeToStatus } from '@codesandbox/common/lib/utils/notifications';
 import { NotificationStatus } from '@codesandbox/notifications';
+import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
 import {
   Authorization,
   CollaboratorFragment,
@@ -86,7 +86,6 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
     );
 
     state.editor.isForkingSandbox = false;
-    return;
   }
 
   await effects.vscode.closeAllTabs();
@@ -157,7 +156,6 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
     }
     state.editor.error = detail || error.message;
     state.editor.isLoading = false;
-    return;
   }
 
   const sandbox = state.editor.currentSandbox!;

packages/app/src/app/overmind/utils/items.ts

@@ -77,6 +77,10 @@ export const COMMENTS: INavigationItem = {
 export function getDisabledItems(store: any): INavigationItem[] {
   const { currentSandbox } = store.editor;
 
+  if (!currentSandbox) {
+    return [PROJECT_SUMMARY, CONFIGURATION, GITHUB, DEPLOYMENT, SERVER, LIVE];
+  }
+
   if (!currentSandbox.owned || !store.isLoggedIn) {
     return [GITHUB, DEPLOYMENT, LIVE];
   }
@@ -85,6 +89,9 @@ export function getDisabledItems(store: any): INavigationItem[] {
 }
 
 export default function getItems(store: any): INavigationItem[] {
+  if (!store.editor.currentSandbox) {
+    return [];
+  }
   if (
     store.live.isLive &&
     !(
@@ -101,7 +108,7 @@ export default function getItems(store: any): INavigationItem[] {
 
   const { currentSandbox } = store.editor;
 
-  if (!currentSandbox.owned) {
+  if (!currentSandbox || !currentSandbox.owned) {
     return [PROJECT_SUMMARY, CONFIGURATION];
   }
 

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

@@ -12,7 +12,7 @@ import { ThemeProvider } from 'styled-components';
 import preventGestureScroll, { removeListener } from './prevent-gesture-scroll';
 import { Preview } from './Preview';
 
-export const MainWorkspace: React.FC = () => {
+export const MainWorkspace: React.FC<{ theme: any }> = ({ theme }) => {
   const { state, actions, effects, reaction } = useOvermind();
   const editorEl = useRef(null);
   const contentEl = useRef(null);
@@ -61,11 +61,11 @@ export const MainWorkspace: React.FC = () => {
   const sandbox = state.editor.currentSandbox;
   const { preferences } = state;
   const windowVisible = state.editor.previewWindowVisible;
-  const template = getTemplateDefinition(sandbox.template);
+  const template = sandbox && getTemplateDefinition(sandbox.template);
   const views = state.editor.devToolTabs;
   const currentPosition = state.editor.currentDevToolsPosition;
   const modulePath = currentModule.path;
-  const config = template.configurationFiles[modulePath];
+  const config = template && template.configurationFiles[modulePath];
 
   const browserConfig = {
     id: 'codesandbox.browser',
@@ -85,10 +85,14 @@ export const MainWorkspace: React.FC = () => {
 
   return (
     <ThemeProvider
-      theme={{
-        templateColor: template.color,
-        templateBackgroundColor: template.backgroundColor,
-      }}
+      theme={
+        template
+          ? {
+              templateColor: template.color,
+              templateBackgroundColor: template.backgroundColor,
+            }
+          : theme
+      }
     >
       <div
         id="workbench.main.container"
@@ -99,6 +103,7 @@ export const MainWorkspace: React.FC = () => {
           overflow: 'visible', // For VSCode Context Menu
           display: 'flex',
           flexDirection: 'column',
+          backgroundColor: 'transparent',
         }}
         ref={contentEl}
       >
@@ -110,6 +115,7 @@ export const MainWorkspace: React.FC = () => {
           onDragStarted={() => {
             actions.editor.resizingStarted();
           }}
+          resizerStyle={state.editor.isLoading ? { display: 'none' } : null}
           onChange={() => {
             updateEditorSize();
           }}
@@ -179,7 +185,7 @@ export const MainWorkspace: React.FC = () => {
                   )}
                 </Icons>
               ) : null}
-              <CodeEditor />
+              {state.editor.isLoading ? null : <CodeEditor />}
             </div>
           </div>
 
@@ -191,46 +197,47 @@ export const MainWorkspace: React.FC = () => {
             }}
             id="csb-devtools" // used for tabs for highlighting
           >
-            {views.map((v, i) => (
-              <DevTools
-                // eslint-disable-next-line react/no-array-index-key
-                key={i}
-                devToolIndex={i}
-                addedViews={{
-                  'codesandbox.browser': browserConfig,
-                }}
-                setDragging={dragging => {
-                  if (dragging) {
-                    actions.editor.resizingStarted();
-                  } else {
-                    actions.editor.resizingStopped();
+            {sandbox &&
+              views.map((v, i) => (
+                <DevTools
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={i}
+                  devToolIndex={i}
+                  addedViews={{
+                    'codesandbox.browser': browserConfig,
+                  }}
+                  setDragging={dragging => {
+                    if (dragging) {
+                      actions.editor.resizingStarted();
+                    } else {
+                      actions.editor.resizingStopped();
+                    }
+                  }}
+                  sandboxId={sandbox.id}
+                  template={sandbox.template}
+                  shouldExpandDevTools={state.preferences.showDevtools}
+                  zenMode={preferences.settings.zenMode}
+                  setDevToolsOpen={open =>
+                    actions.preferences.setDevtoolsOpen(open)
                   }
-                }}
-                sandboxId={sandbox.id}
-                template={sandbox.template}
-                shouldExpandDevTools={state.preferences.showDevtools}
-                zenMode={preferences.settings.zenMode}
-                setDevToolsOpen={open =>
-                  actions.preferences.setDevtoolsOpen(open)
-                }
-                owned={sandbox.owned}
-                primary={i === 0}
-                viewConfig={v}
-                moveTab={(prevPos, nextPos) => {
-                  actions.editor.onDevToolsTabMoved({ prevPos, nextPos });
-                }}
-                closeTab={pos => {
-                  actions.editor.onDevToolsTabClosed({ pos });
-                }}
-                currentDevToolIndex={currentPosition.devToolIndex}
-                currentTabPosition={currentPosition.tabPosition}
-                setPane={position =>
-                  actions.editor.onDevToolsPositionChanged({
-                    position,
-                  })
-                }
-              />
-            ))}
+                  owned={sandbox.owned}
+                  primary={i === 0}
+                  viewConfig={v}
+                  moveTab={(prevPos, nextPos) => {
+                    actions.editor.onDevToolsTabMoved({ prevPos, nextPos });
+                  }}
+                  closeTab={pos => {
+                    actions.editor.onDevToolsTabClosed({ pos });
+                  }}
+                  currentDevToolIndex={currentPosition.devToolIndex}
+                  currentTabPosition={currentPosition.tabPosition}
+                  setPane={position =>
+                    actions.editor.onDevToolsPositionChanged({
+                      position,
+                    })
+                  }
+                />
+              ))}
           </div>
         </SplitPane>
       </div>

packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx

@@ -1,18 +1,17 @@
-import React from 'react';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import { Avatar, Button, Stack } from '@codesandbox/components';
+import css from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
-
 import { UserMenu } from 'app/pages/common/UserMenu';
-import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import React, { useEffect, useState } from 'react';
 import * as featureFlags from '@codesandbox/common/lib/utils/feature-flags';
 
-import { Stack, Avatar, Button } from '@codesandbox/components';
-import css from '@styled-system/css';
 import {
-  ReloadIcon,
-  PreferenceIcon,
-  LikeIcon,
   EmbedIcon,
   ForkIcon,
+  LikeIcon,
+  PreferenceIcon,
+  ReloadIcon,
 } from './icons';
 import { Collaborators } from './Collaborators';
 
@@ -48,6 +47,18 @@ export const Actions = () => {
 
     actions: { signInClicked },
   } = useOvermind();
+  const [fadeIn, setFadeIn] = useState(false);
+
+  useEffect(() => {
+    if (!fadeIn) {
+      const timeoutId = setTimeout(() => {
+        setFadeIn(true);
+      }, 500);
+      return () => clearTimeout(timeoutId);
+    }
+
+    return () => {};
+  }, [fadeIn]);
 
   const handleSignIn = async () => {
     await signInClicked({ useExtraScopes: false });
@@ -58,7 +69,15 @@ export const Actions = () => {
   else primaryAction = owned ? 'Embed' : 'Fork';
 
   return (
-    <Stack align="center" gap={1} css={{ '> button': { width: 'auto' } }}>
+    <Stack
+      align="center"
+      gap={1}
+      css={{ '> button': { width: 'auto' } }}
+      style={{
+        opacity: fadeIn ? 1 : 0,
+        transition: 'opacity 0.25s ease-in-out',
+      }}
+    >
       {updateStatus === 'available' && (
         <TooltipButton
           tooltip="Update Available! Click to Refresh."

packages/app/src/app/pages/Sandbox/Editor/Header/MenuBar/elements.ts

@@ -11,3 +11,27 @@ export const Container = styled.div`
   align-items: center;
   margin-left: 0.5rem;
 `;
+
+export const SkeletonMenuItem = styled.div`
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 4px 12px;
+  zoom: 1;
+  white-space: nowrap;
+  border-radius: 2px;
+  height: 38px;
+  color: #999;
+  font-size: 0.8125rem;
+`;
+
+export const SkeletonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  height: 38px;
+  font-size: 0.8125rem;
+  flex-shrink: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  flex-wrap: wrap;
+`;

packages/app/src/app/pages/Sandbox/Editor/Header/MenuBar/index.tsx

@@ -1,13 +1,32 @@
+import './titlebar.css';
+
 import track from '@codesandbox/common/lib/utils/analytics';
+import { useOvermind } from 'app/overmind';
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 
-import { useOvermind } from 'app/overmind';
+import {
+  Child,
+  Container,
+  SkeletonContainer,
+  SkeletonMenuItem,
+} from './elements';
 
-import { Child, Container } from './elements';
-import './titlebar.css';
+const MenuBarSkeleton: FunctionComponent = () => (
+  <SkeletonContainer>
+    <SkeletonMenuItem>File</SkeletonMenuItem>
+    <SkeletonMenuItem>Edit</SkeletonMenuItem>
+    <SkeletonMenuItem>Selection</SkeletonMenuItem>
+    <SkeletonMenuItem>View</SkeletonMenuItem>
+    <SkeletonMenuItem>Go</SkeletonMenuItem>
+    <SkeletonMenuItem>Help</SkeletonMenuItem>
+    <SkeletonMenuItem style={{ visibility: 'hidden' }}>
+      <div style={{ width: 20 }} />
+    </SkeletonMenuItem>
+  </SkeletonContainer>
+);
 
 export const MenuBar: FunctionComponent = () => {
-  const { effects } = useOvermind();
+  const { state, effects } = useOvermind();
   const menuBarEl = useRef(null);
 
   useEffect(() => {
@@ -22,7 +41,11 @@ export const MenuBar: FunctionComponent = () => {
       className="part titlebar"
       onClick={() => track('Editor - Click Menubar')}
     >
-      <Child ref={menuBarEl} />
+      <Child
+        ref={menuBarEl}
+        style={state.editor.isLoading ? { display: 'none' } : null}
+      />
+      {state.editor.isLoading ? <MenuBarSkeleton /> : null}
     </Container>
   );
 };

packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/elements.ts

@@ -33,6 +33,9 @@ export const NameInput = styled(AutosizeInput)`
 
 export const Main = styled.div`
   display: none;
+  transition: opacity 0.25s ease-in-out;
+  opacity: 0;
+  z-index: 10;
 
   @media screen and (min-width: 826px) {
     display: block;