Show splash screen ASAP, load render JS async

Christopher Willis-Ford · Christopher Willis-Ford · commit f57320e718af · 2019-07-17T17:09:25.000-07:00
diff --git a/electron-webpack.json5 b/electron-webpack.json5
@@ -3,6 +3,7 @@
         "webpackConfig": "webpack.main.additions.js"
     },
     "renderer": {
+        "template": "src/renderer/index.html",
         "webpackConfig": "webpack.renderer.additions.js"
     }
 }
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        .splash {
+            font-size: xx-large;
+            margin: 0;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    </style>
+</head>
+<body>
+    <div id="app"><p class="splash">Scratch Desktop is loading...</p></div>
+</body>
+</html>
diff --git a/src/renderer/index.js b/src/renderer/index.js
@@ -1 +1,3 @@
-import './app.jsx';
+// this is an async import so that it doesn't block the first render
+// index.html contains a loading/splash screen which will display while this import loads
+import('./app.jsx');

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`"webpackConfig": "webpack.main.additions.js"`
`4`	`4`	`},`
`5`	`5`	`"renderer": {`
	`6`	`+ "template": "src/renderer/index.html",`
`6`	`7`	`"webpackConfig": "webpack.renderer.additions.js"`
`7`	`8`	`}`
`8`	`9`	`}`