Fixes #2331

Playground/css/index.css

@@ -9,6 +9,34 @@ body {
     overflow: hidden;
     font-family: sans-serif;
 }
+#waitDiv {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: black;
+    opacity: 0.8;
+    top:0px;
+    left:0px;
+    z-index: 10;
+    flex-direction: column;
+}
+
+#waitSpan {
+    text-align: center;
+    font-size: 20px;
+    font-weight: lighter;
+    color: white;
+}
+
+#waitTitle {
+    text-align: center;
+    font-size: 38px;
+    color: #15A4FA;
+}
+
 .wrapper {
     height: calc(100% - 40px - 30px); /* nvabar top and bottom*/
     width: 100%;

Playground/index-local.html

@@ -343,6 +343,11 @@
         </div>
     </div>
 
+    <div id="waitDiv">
+        <span id="waitTitle">Babylon.js Playground<BR><BR><BR></span>
+        <span id="waitSpan">please wait<br>loading editor...</span>
+    </div>    
+
     <script src="https://code.jquery.com/jquery.js"></script>
 
     <script src="js/actions.js"></script>

Playground/index.html

@@ -379,6 +379,11 @@
         </div>
     </div>
 
+    <div id="waitDiv">
+        <span id="waitTitle">Babylon.js Playground<BR><BR><BR></span>
+        <span id="waitSpan">please wait<br>loading editor...</span>
+    </div>    
+
     <script src="https://code.jquery.com/jquery.js"></script>
 
     <script src="js/actions.js"></script>

Playground/js/index.js

@@ -280,6 +280,10 @@
 
         compileAndRun = function () {
             try {
+                var waitRing = document.getElementById("waitDiv");
+                if (waitRing) {
+                    waitRing.style.display = "none";
+                }
 
                 if (!BABYLON.Engine.isSupported()) {
                     showError("Your browser does not support WebGL", null);