SSE loading screen updates. (codesandbox#2987)

Author: lbogdan

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

@@ -10,7 +10,7 @@
     "gsap": "^2.0.2",
     "preact": "^8.3.1",
     "preact-emotion": "^9.2.10",
-    "socket.io-client": "^2.2.0",
+    "socket.io-client": "^2.3.0",
     "xterm": "^3.5.1",
     "xterm-webfont": "^1.1.1"
   },

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

@@ -68,7 +68,7 @@ body {
   box-sizing: border-box;
   max-width: 600px;
   width: 100%;
-  font-size: 1.5rem;
+  font-size: 1.3rem;
   font-weight: 200;
   display: flex;
   align-items: center;

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

@@ -20,12 +20,14 @@ import { listenForPreviewSecret } from 'sandbox-hooks/preview-secret';
 import Cube from './Cube';
 
 const SECOND = 1000; // ms
+const ERROR_COLOR = '#dc143c';
 
 // without this line, CSSPlugin and AttrPlugin may get dropped by your bundler...
 // eslint-disable-next-line
 const plugins = [CSSPlugin, AttrPlugin];
 
 let color;
+let error = false;
 
 let hostParts;
 if (process.env.NODE_ENV === 'development') {
@@ -70,27 +72,37 @@ const createMainCube = () => {
 
   const cubeTl = new TimelineLite({
     onComplete() {
-      const clearerColor = color && color.clearer(0.4);
+      let normalColor;
+      let clearerColor;
+      if (error) {
+        normalColor = ERROR_COLOR;
+        clearerColor = ERROR_COLOR;
+      } else {
+        normalColor = color && color();
+        clearerColor = color && color.clearer(0.4)();
+      }
       TweenLite.to(
         '.side',
         0.5,
         clearerColor
           ? {
-              boxShadow: `0 0 150px ${clearerColor()}`,
-              backgroundColor: clearerColor(),
+              boxShadow: `0 0 150px ${clearerColor}`,
+              backgroundColor: clearerColor,
             }
           : {}
       );
       TweenLite.to(
         '#loading-progress',
         0.5,
-        color
+        normalColor
           ? {
-              backgroundColor: color(),
+              backgroundColor: normalColor,
             }
           : {}
       );
-      this.restart();
+      if (!error) {
+        this.restart();
+      }
     },
   });
 
@@ -177,6 +189,15 @@ const createMainCube = () => {
   // TweenLite.to('#fourth', 0.5, { x: 0, y: -66 });
 };
 
+function updateStatusError(message) {
+  error = true;
+  const barTl = new TimelineLite();
+  barTl
+    .to('#loading-progress', 0.5, { width: '100%' })
+  document.getElementById('loading-text').textContent = message;
+  console.error(message);
+}
+
 setTimeout(createMainCube, 500);
 
 const NICE_TITLES = {
@@ -217,7 +238,9 @@ async function start() {
 
   const socket = io(`https://${domain}`, {
     autoConnect: false,
-    transports: ['websocket', 'polling'],
+    transports: ['websocket'],
+    reconnectionAttempts: 5,
+    reconnectionDelayMax: 32000,
   });
 
   socket.on('connect', () => {
@@ -237,7 +260,7 @@ async function start() {
 
   socket.on('sandbox:error', ({ message, unrecoverable }) => {
     if (unrecoverable) {
-      document.getElementById('loading-text').textContent = message;
+      updateStatusError(message);
       socket.close();
     }
   });
@@ -296,11 +319,21 @@ async function start() {
 
   window.addEventListener('resize', () => term.fit());
 
+  socket.on('reconnect_attempt', (attemptNumber) => {
+    if (attemptNumber === 3) {
+      socket.io.opts.transports = ['polling', 'websocket'];
+    }
+  });
+
+  socket.on('reconnect_failed', () => {
+    updateStatusError('Failed to connect to containers service, please try again later');
+  });
+
   socket.connect();
 }
 
 if (isLoop) {
-  document.getElementById('loading-text').textContent = 'Error: Reloading too fast.';
+  updateStatusError('Reloading too fast');
 } else {
   localStorage.setItem('last_loaded_at', now);
 

standalone-packages/sse-loading-screen/yarn.lock

@@ -1139,10 +1139,10 @@ bindings@~1.2.1:
   resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.2.1.tgz#14ad6113812d2d37d72e67b4cacb4bb726505f11"
   integrity sha1-FK1hE4EtLTfXLme0ystLtyZQXxE=
 
-[email protected].4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
-  integrity sha1-vPEwUspURj8w+fx+lbmkdjCpSSE=
+[email protected].5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
+  integrity sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==
 
 bluebird@^3.0.5:
   version "3.5.1"
@@ -2018,6 +2018,13 @@ debug@~3.1.0:
   dependencies:
     ms "2.0.0"
 
+debug@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
 decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -2236,15 +2243,15 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-engine.io-client@~3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.3.2.tgz#04e068798d75beda14375a264bb3d742d7bc33aa"
-  integrity sha512-y0CPINnhMvPuwtqXfsGuWE8BB66+B6wTtCofQDRecMQPYX3MYUZXFNKDhdrSe3EVjgOu4V3rxdeqN/Tr91IgbQ==
+engine.io-client@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.4.0.tgz#82a642b42862a9b3f7a188f41776b2deab643700"
+  integrity sha512-a4J5QO2k99CM2a0b12IznnyQndoEvtA4UAldhGzKqnHf42I3Qs2W5SPnDvatZRcMaNZs4IevVicBPayxYt6FwA==
   dependencies:
     component-emitter "1.2.1"
     component-inherit "0.0.3"
-    debug "~3.1.0"
-    engine.io-parser "~2.1.1"
+    debug "~4.1.0"
+    engine.io-parser "~2.2.0"
     has-cors "1.1.0"
     indexof "0.0.1"
     parseqs "0.0.5"
@@ -2253,15 +2260,15 @@ engine.io-client@~3.3.1:
     xmlhttprequest-ssl "~1.5.4"
     yeast "0.1.2"
 
-engine.io-parser@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.2.tgz#4c0f4cff79aaeecbbdcfdea66a823c6085409196"
-  integrity sha512-dInLFzr80RijZ1rGpx1+56/uFoH7/7InhH3kZt+Ms6hT8tNx3NGW/WNSA/f8As1WkOfkuyb3tnRyuXGxusclMw==
+engine.io-parser@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.2.0.tgz#312c4894f57d52a02b420868da7b5c1c84af80ed"
+  integrity sha512-6I3qD9iUxotsC5HEMuuGsKA0cXerGz+4uGcXQEkfBidgKf0amsjrrtwcbwK/nzpZBxclXlV7gGl9dgWvu4LF6w==
   dependencies:
     after "0.8.2"
     arraybuffer.slice "~0.0.7"
     base64-arraybuffer "0.1.5"
-    blob "0.0.4"
+    blob "0.0.5"
     has-binary2 "~1.0.2"
 
 entities@^1.1.1, entities@~1.1.1:
@@ -3458,6 +3465,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
+ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
 nan@^2.0.7, nan@^2.9.2:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
@@ -5097,17 +5109,17 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-socket.io-client@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.2.0.tgz#84e73ee3c43d5020ccc1a258faeeb9aec2723af7"
-  integrity sha512-56ZrkTDbdTLmBIyfFYesgOxsjcLnwAKoN4CiPyTVkMQj3zTUh0QAx3GbvIvLpFEOvQWu92yyWICxB0u7wkVbYA==
+socket.io-client@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.3.0.tgz#14d5ba2e00b9bcd145ae443ab96b3f86cbcc1bb4"
+  integrity sha512-cEQQf24gET3rfhxZ2jJ5xzAOo/xhZwK+mOqtGRg5IowZsMgwvHwnf/mCRapAAkadhM26y+iydgwsXGObBB5ZdA==
   dependencies:
     backo2 "1.0.2"
     base64-arraybuffer "0.1.5"
     component-bind "1.0.0"
     component-emitter "1.2.1"
-    debug "~3.1.0"
-    engine.io-client "~3.3.1"
+    debug "~4.1.0"
+    engine.io-client "~3.4.0"
     has-binary2 "~1.0.2"
     has-cors "1.1.0"
     indexof "0.0.1"