improve transition

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 { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { convertTypeToStatus } from '@codesandbox/common/lib/utils/notifications';
-import { NotificationStatus } from '@codesandbox/notifications';
+import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { NotificationStatus } from '@codesandbox/notifications';
 import {
   Authorization,
   CollaboratorFragment,
@@ -472,6 +472,8 @@ export const moduleSelected: Action<
 > = ({ actions, effects, state }, { id, path }) => {
   effects.analytics.track('Open File');
 
+  state.editor.hasLoadedInitialModule = true;
+
   const sandbox = state.editor.currentSandbox;
 
   if (!sandbox) {

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

@@ -84,9 +84,11 @@ type State = {
   selectedCommentsFilter: CommentsFilterOption;
   currentCommentId: string | null;
   currentComment: Derive<State, Comment | null>;
+  hasLoadedInitialModule: boolean;
 };
 
 export const state: State = {
+  hasLoadedInitialModule: false,
   comments: {},
   currentCommentId: null, // '5e5961e0c277a40fef1e391b',
   currentComment: ({ comments, currentSandbox, currentCommentId }) => {

packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts

@@ -25,8 +25,8 @@ export const SkeletonTextBlock = styled.div(
 export const SkeletonWrapper = styled.div`
   position: absolute;
   font-family: Inter, sans-serif;
-  transition: opacity 0.5s ease-out;
   opacity: 1;
+  transition: opacity 0.5s ease-out;
   background-color: ${props =>
     props.theme.colors?.editor?.background || 'black'};
   width: 100%;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import Navigator from '@codesandbox/common/lib/components/Preview/Navigator';
-
-import { Stack, Collapsible, List, ListItem } from '@codesandbox/components';
+import { Collapsible, List, ListItem, Stack } from '@codesandbox/components';
 import css from '@styled-system/css';
+import React from 'react';
 
 import {
   SkeletonDevtools,
@@ -12,42 +11,33 @@ import {
   SkeletonEditor,
   SkeletonEditorTop,
   SkeletonExplorer,
-  SkeletonWrapper,
   SkeletonTextBlock,
+  SkeletonWrapper,
 } from './elements';
 
-export const ContentSkeleton = ({ style, onTransitionEnd }) => {
-  React.useEffect(() => {
-    // In case we started already with opacity 0
-    if (style.opacity === 0) {
-      // onTransitionEnd();
-    }
-  }, [onTransitionEnd, style.opacity]); // eslint-disable-line we don't want to check style on purpose
-
-  return (
-    <SkeletonWrapper style={style} onTransitionEnd={onTransitionEnd}>
-      <SkeletonExplorer>
-        <SkeletonExplorerContents />
-      </SkeletonExplorer>
-      <SkeletonEditor>
-        <SkeletonEditorTop />
-      </SkeletonEditor>
-      <SkeletonDevtools>
-        <SkeletonDevtoolsTop />
-        <SkeletonDevtoolsNavigator>
-          <Navigator
-            url=""
-            onChange={() => {}}
-            onConfirm={() => {}}
-            onRefresh={() => {}}
-            isProjectView
-          />
-        </SkeletonDevtoolsNavigator>
-        <SkeletonDevtoolsIframe />
-      </SkeletonDevtools>
-    </SkeletonWrapper>
-  );
-};
+export const ContentSkeleton = ({ style, onTransitionEnd }) => (
+  <SkeletonWrapper style={style}>
+    <SkeletonExplorer>
+      <SkeletonExplorerContents />
+    </SkeletonExplorer>
+    <SkeletonEditor>
+      <SkeletonEditorTop />
+    </SkeletonEditor>
+    <SkeletonDevtools>
+      <SkeletonDevtoolsTop />
+      <SkeletonDevtoolsNavigator>
+        <Navigator
+          url=""
+          onChange={() => {}}
+          onConfirm={() => {}}
+          onRefresh={() => {}}
+          isProjectView
+        />
+      </SkeletonDevtoolsNavigator>
+      <SkeletonDevtoolsIframe />
+    </SkeletonDevtools>
+  </SkeletonWrapper>
+);
 
 const SkeletonExplorerContents = () => (
   <>

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

@@ -1,5 +1,4 @@
 import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
-
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
 import { REDESIGNED_SIDEBAR } from '@codesandbox/common/lib/utils/feature-flags';
@@ -17,9 +16,9 @@ import { Header } from './Header';
 import { Header as HeaderOld } from './HeaderOld';
 import { Navigation } from './Navigation';
 import { Navigation as NavigationOld } from './NavigationOld';
+import { ContentSkeleton } from './Skeleton';
 import getVSCodeTheme from './utils/get-vscode-theme';
 import { Workspace } from './Workspace';
-import { ContentSkeleton } from './Skeleton';
 
 const STATUS_BAR_SIZE = 22;
 
@@ -30,7 +29,7 @@ const StatusBar = styled.div`
 `;
 
 const ContentSplit = () => {
-  const { state, actions, effects } = useOvermind();
+  const { state, actions, effects, reaction } = useOvermind();
   const statusbarEl = useRef(null);
   const [showSkeleton, setShowSkeleton] = useState(true);
   const [localState, setLocalState] = useState({
@@ -41,6 +40,13 @@ const ContentSplit = () => {
     customVSCodeTheme: null,
   });
 
+  useEffect(() =>
+    reaction(
+      reactionState => reactionState.editor.hasLoadedInitialModule,
+      () => setShowSkeleton(false)
+    )
+  );
+
   useEffect(() => {
     async function loadTheme() {
       const vsCodeTheme = state.preferences.settings.customVSCodeTheme;
@@ -158,12 +164,15 @@ const ContentSplit = () => {
             {showSkeleton ? (
               <NewThemeProvider theme={localState.theme.vscodeTheme}>
                 <ContentSkeleton
-                  style={{
-                    opacity: state.editor.isLoading ? 1 : 0,
-                  }}
-                  onTransitionEnd={() => {
-                    setShowSkeleton(false);
-                  }}
+                  style={
+                    state.editor.hasLoadedInitialModule
+                      ? {
+                          opacity: 0,
+                        }
+                      : {
+                          opacity: 1,
+                        }
+                  }
                 />
               </NewThemeProvider>
             ) : null}