Update dependency loading screen (codesandbox#412)

* Change loading screen

* Fix loading screen info

Author: CompuIves

packages/app/src/app/components/sandbox/Preview/index.js

@@ -128,6 +128,12 @@ export default class Preview extends React.PureComponent<Props, State> {
       return;
     }
 
+    if (prevProps.dependencies !== this.props.dependencies) {
+      // Changed dependencies
+      this.executeCodeImmediately();
+      return;
+    }
+
     if (prevProps.module.id !== this.props.module.id) {
       if (prevProps.isInProjectView && this.props.isInProjectView) {
         // If user only navigated while watching project

packages/app/src/sandbox/npm/fetch-dependencies.js

@@ -124,7 +124,7 @@ async function getDependencies(dependencies: Object) {
     );
     return bucketManifest;
   } catch (e) {
-    dispatch(actions.notifications.show('Resolving dependencies...'));
+    setScreen({ type: 'loading', text: 'Resolving Dependencies...' });
 
     // The dep has not been generated yet...
     const { url } = await requestPackager(
@@ -141,10 +141,8 @@ export default async function fetchDependencies(npmDependencies: Dependencies) {
     // New Packager flow
 
     try {
-      dispatch(actions.notifications.show('Downloading dependencies...'));
       const result = await getDependencies(npmDependencies);
-      setScreen({ type: 'loading', text: 'Transpiling...' });
-      dispatch(actions.notifications.show('Dependencies loaded!', 'success'));
+      setScreen({ type: 'loading', text: 'Transpiling Modules...' });
 
       return result;
     } catch (e) {

packages/app/src/sandbox/npm/index.js

@@ -36,8 +36,6 @@ export default async function loadDependencies(dependencies: NPMDependencies) {
 
       const data = await fetchDependencies(dependenciesWithoutTypings);
       manifest = data;
-
-      setScreen({ type: 'loading', text: 'Downloading Dependencies...' });
     }
   } else {
     manifest = null;

packages/app/src/sandbox/status-screen/index.js

@@ -1,5 +1,6 @@
 // @flow
 // This is the loading screen
+import loadingHtml from './loading-screen.html';
 
 type LoadingScreen = {
   type: 'loading',
@@ -10,37 +11,64 @@ type Screen = LoadingScreen;
 
 let currentScreen: ?Screen = null;
 let firstLoaded = null;
-const LOADING_SCREEN_ID = 'csb-loading-screen';
+
+let iframeReference = null;
+
+function changeText(text: string) {
+  if (iframeReference) {
+    iframeReference.contentDocument
+      .getElementsByClassName('text')
+      .item(0).textContent = text;
+  }
+}
+
+function createOverlay() {
+  return new Promise(resolve => {
+    const iframe = document.createElement('iframe');
+
+    iframe.setAttribute(
+      'style',
+      `position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 2147483647;`
+    );
+
+    iframe.onload = () => {
+      iframe.contentDocument.body.innerHTML = loadingHtml;
+      iframeReference = iframe;
+
+      if (currentScreen) {
+        changeText(currentScreen.text);
+      }
+      resolve();
+    };
+
+    document.body.appendChild(iframe);
+  });
+}
 
 export function resetScreen() {
-  if (document.getElementById(LOADING_SCREEN_ID)) {
-    document.body.innerHTML = '';
-    currentScreen = null;
+  currentScreen = null;
+  try {
+    window.document.body.removeChild(iframeReference);
+    iframeReference = null;
+  } catch (e) {
+    /* nothing */
   }
 }
 
 export default function setScreen(screen: Screen) {
-  if (document.getElementById(LOADING_SCREEN_ID)) {
-    if (!firstLoaded && !currentScreen) {
+  if (!iframeReference && !currentScreen) {
+    if (!firstLoaded) {
       // Give the illusion of faster loading by showing the loader screen later
-      firstLoaded = setTimeout(async () => {
+      firstLoaded = setTimeout(() => {
         if (currentScreen) {
-          const loadingHtml = await import(/* webpackChunkName: 'loading-screen' */ './loading-screen.html');
-
-          if (currentScreen) {
-            document.body.innerHTML = loadingHtml;
-
-            document.getElementsByClassName('text').item(0).textContent =
-              currentScreen.text;
-          }
+          createOverlay();
         }
-      }, 500);
-    } else if (screen.type === 'loading') {
-      if (document.getElementsByClassName('text').item(0)) {
-        document.getElementsByClassName('text').item(0).textContent =
-          screen.text;
-      }
+      }, 600);
+    } else {
+      createOverlay(screen.text);
     }
+  } else if (screen.type === 'loading') {
+    changeText(screen.text);
   }
 
   currentScreen = screen;