Container loading screen improvements (codesandbox#1237)

* SSE loading screen: force reload the current URL after sandbox starts.

* Disabled source maps.

* Added unrecoverable error handling.

* Added reload loop prevention.

* Remove (now) unneeded .babelrc.

* Fix templates import path.

* Use @codesandbox/common package.

* Try websocket transport first, and fall back to polling if not supported.

Author: lbogdan

standalone-packages/sse-loading-screen/package.json

@@ -4,6 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
+    "@codesandbox/common": "^1.0.4",
     "babel-plugin-emotion": "^9.2.10",
     "emotion": "^9.2.10",
     "gsap": "^2.0.2",
@@ -24,7 +25,7 @@
   },
   "scripts": {
     "start": "parcel src/index.html",
-    "build": "rimraf dist && parcel build src/index.html",
+    "build": "rimraf dist && parcel build src/index.html --no-source-maps",
     "install-dependencies": "yarn install"
   }
 }

standalone-packages/sse-loading-screen/src/index.html

@@ -36,7 +36,7 @@
       </div>
     </div>
 
-    <!-- <script src="./index.js" type="application/javascript"></script> -->
+    <script src="./index.js" type="application/javascript"></script>
   </body>
 
 </html>

standalone-packages/sse-loading-screen/src/index.js

@@ -2,7 +2,7 @@
 /** @jsx h */
 import io from 'socket.io-client';
 import { Terminal } from 'xterm';
-import { render, h } from 'preact';
+import { render, h } from 'preact'; // eslint-disable-line import/extensions
 import * as fit from 'xterm/lib/addons/fit/fit';
 import * as WebfontLoader from 'xterm-webfont';
 import 'xterm/dist/xterm.css';
@@ -12,7 +12,7 @@ import { Power3 } from 'gsap/EasePack';
 import TweenLite from 'gsap/TweenLite';
 import TimelineLite from 'gsap/TimelineLite';
 
-import getTemplate from '../../../packages/common/templates';
+import getTemplate from '@codesandbox/common/lib/templates';
 
 import Cube from './Cube';
 
@@ -31,36 +31,15 @@ if (process.env.NODE_ENV === 'development') {
 const rootDomain = `codesandbox.${hostParts[hostParts.length - 1]}`;
 const domain = `sse.${rootDomain}`;
 const sandbox = hostParts[0];
-
-if (process.env.NODE_ENV === 'production') {
-  fetch(`https://${rootDomain}/api/v1/sandboxes/${sandbox}/slim`)
-    .then(res => {
-      if (res.status === 404) {
-        window.location.replace(`https://${rootDomain}/s/${sandbox}`);
-        return {};
-      }
-
-      return res.json();
-    })
-    .then(json => {
-      if (Object.keys(json) > 0 && !json.is_sse) {
-        window.location.replace(`https://${sandbox}.${rootDomain}/`);
-      }
-      if (json.template) {
-        const templateDef = getTemplate(json.template);
-
-        color =
-          json.template === 'next'
-            ? templateDef.color.darken(0.3)
-            : templateDef.color;
-      }
-    });
-} else {
-  setTimeout(() => {
-    const templateDef = getTemplate('gatsby');
-
-    color = templateDef.color;
-  }, 1200);
+const lastLoadedAt = parseInt(localStorage.getItem('last_loaded_at'), 10);
+const now = Date.now();
+let isLoop = false;
+
+if (lastLoadedAt) {
+  const timeDiff = now - lastLoadedAt;
+  if (timeDiff <= 5000) {
+    isLoop = true;
+  }
 }
 
 function createCube(element, id, noAnimation = false, styles = {}) {
@@ -173,9 +152,9 @@ const createMainCube = () => {
       '-=.1'
     );
 
-  //topfront 0 -16
-  //topleft -52 -42
-  //topright 53 -41
+  // topfront 0 -16
+  // topleft -52 -42
+  // topright 53 -41
 
   // createCube(cubeEl, 'second', true);
   // TweenLite.to('#second', 0.5, { x: 53, y: 26 });
@@ -225,17 +204,25 @@ async function start() {
 
   const socket = io(`https://${domain}`, {
     autoConnect: false,
+    transports: ['websocket', 'polling'],
   });
 
   socket.on('connect', () => {
     socket.emit('sandbox', { id: sandbox });
     socket.emit('sandbox:start');
   });
 
-  socket.on('sandbox:log', ({ chan, data }) => {
+  socket.on('sandbox:log', ({ data }) => {
     term.write(data);
   });
 
+  socket.on('sandbox:error', ({ message, unrecoverable }) => {
+    if (unrecoverable) {
+      document.getElementById('loading-text').textContent = message;
+      socket.close();
+    }
+  });
+
   window.s = socket;
 
   const maximizeTerminal = () => {
@@ -278,9 +265,7 @@ async function start() {
     updateStatus(4, 3, 'started');
 
     setTimeout(() => {
-      // if (process.env.NODE_ENV === 'production') {
-      window.location.replace(`https://${sandbox}.${domain}/`);
-      // }
+      window.location.reload(true);
     }, 100);
   });
 
@@ -289,4 +274,41 @@ async function start() {
   socket.connect();
 }
 
-start();
+if (isLoop) {
+  document.getElementById('loading-text').textContent = 'Error: Reloading too fast.';
+} else {
+  localStorage.setItem('last_loaded_at', now);
+
+  if (process.env.NODE_ENV === 'production') {
+    fetch(`https://${rootDomain}/api/v1/sandboxes/${sandbox}/slim`)
+      .then(res => {
+        if (res.status === 404) {
+          window.location.replace(`https://${rootDomain}/s/${sandbox}`);
+          return {};
+        }
+
+        return res.json();
+      })
+      .then(json => {
+        if (Object.keys(json) > 0 && !json.is_sse) {
+          window.location.replace(`https://${sandbox}.${rootDomain}/`);
+        }
+        if (json.template) {
+          const templateDef = getTemplate(json.template);
+
+          color =
+            json.template === 'next'
+              ? templateDef.color.darken(0.3)
+              : templateDef.color;
+        }
+      });
+  } else {
+    setTimeout(() => {
+      const templateDef = getTemplate('gatsby');
+
+      color = templateDef.color;
+    }, 1200);
+  }
+
+  start();
+}