leaner HTML and pre-loading code

Playground/css/index.css

@@ -393,6 +393,10 @@ body {
     background-color: #1e1e1e;
 }
 
+.wrapper #jsEditor pre.loading-pre {
+    margin: 20px;
+}
+
 .wrapper #canvasZone {
     height: 100%;
 }

Playground/js/examples.js

@@ -79,14 +79,91 @@ class Examples {
     displayExamples() {
         this.parent.menuPG.removeAllOptions();
 
+        var scripts = this.parent.main.scripts;
+
+        if (!this.examplesLoaded) {
+
+            
+            function sortScriptsList(a, b) {
+                if (a.title < b.title) return -1;
+                else return 1;
+            }
+
+            for (var i = 0; i < scripts.length; i++) {
+                scripts[i].samples.sort(sortScriptsList);
+
+                var exampleCategory = document.createElement("div");
+                exampleCategory.classList.add("categoryContainer");
+
+                var exampleCategoryTitle = document.createElement("p");
+                exampleCategoryTitle.innerText = scripts[i].title;
+                exampleCategory.appendChild(exampleCategoryTitle);
+
+                for (var ii = 0; ii < scripts[i].samples.length; ii++) {
+                    var example = document.createElement("div");
+                    example.classList.add("itemLine");
+                    example.id = ii;
+
+                    var exampleImg = document.createElement("img");
+                    exampleImg.setAttribute("data-src", scripts[i].samples[ii].icon.replace("icons", "https://doc.babylonjs.com/examples/icons"));
+                    exampleImg.setAttribute("onClick", "document.getElementById('PGLink_" + scripts[i].samples[ii].PGID + "').click();");
+
+                    var exampleContent = document.createElement("div");
+                    exampleContent.classList.add("itemContent");
+                    exampleContent.setAttribute("onClick", "document.getElementById('PGLink_" + scripts[i].samples[ii].PGID + "').click();");
+
+                    var exampleContentLink = document.createElement("div");
+                    exampleContentLink.classList.add("itemContentLink");
+
+                    var exampleTitle = document.createElement("h3");
+                    exampleTitle.classList.add("exampleCategoryTitle");
+                    exampleTitle.innerText = scripts[i].samples[ii].title;
+                    var exampleDescr = document.createElement("div");
+                    exampleDescr.classList.add("itemLineChild");
+                    exampleDescr.innerText = scripts[i].samples[ii].description;
+
+                    var exampleDocLink = document.createElement("a");
+                    exampleDocLink.classList.add("itemLineDocLink");
+                    exampleDocLink.innerText = "Documentation";
+                    exampleDocLink.href = scripts[i].samples[ii].doc;
+                    exampleDocLink.target = "_blank";
+
+                    var examplePGLink = document.createElement("a");
+                    examplePGLink.id = "PGLink_" + scripts[i].samples[ii].PGID;
+                    examplePGLink.classList.add("itemLinePGLink");
+                    examplePGLink.innerText = "Display";
+                    examplePGLink.href = scripts[i].samples[ii].PGID;
+                    examplePGLink.addEventListener("click", function () {
+                        location.href = this.href;
+                        location.reload();
+                    });
+
+                    exampleContentLink.appendChild(exampleTitle);
+                    exampleContentLink.appendChild(exampleDescr);
+                    exampleContent.appendChild(exampleContentLink);
+                    exampleContent.appendChild(exampleDocLink);
+                    exampleContent.appendChild(examplePGLink);
+
+                    example.appendChild(exampleImg);
+                    example.appendChild(exampleContent);
+
+                    exampleCategory.appendChild(example);
+                }
+
+                exampleList.appendChild(exampleCategory);
+            }
+        }
+        this.examplesLoaded = true;
+
+
         this.isExamplesDisplayed = true;
         this.exampleList.style.display = 'block';
         document.getElementsByClassName('wrapper')[0].style.width = 'calc(100% - 400px)';
 
         this.fpsLabel.style.display = 'none';
         this.toggleExamplesButtons.call(this, true);
-        this.exampleList.querySelectorAll("img").forEach(function(img) {
-            if(!img.src) {
+        this.exampleList.querySelectorAll("img").forEach(function (img) {
+            if (!img.src) {
                 img.src = img.getAttribute("data-src");
             }
         })
@@ -99,20 +176,19 @@ class Examples {
         this.isExamplesDisplayed = false;
         this.exampleList.style.display = 'none';
         document.getElementsByClassName('wrapper')[0].style.width = '100%';
-        
-        if(this.parent.menuPG && this.parent.menuPG.isMobileVersion && document.getElementById('jsEditor').style.display == 'block') {}
-        else this.fpsLabel.style.display = 'block';
+
+        if (this.parent.menuPG && this.parent.menuPG.isMobileVersion && document.getElementById('jsEditor').style.display == 'block') {} else this.fpsLabel.style.display = 'block';
         this.toggleExamplesButtons.call(this, false);
     };
 
     toggleExamplesButtons(selected) {
         if (this.examplesButtons.length > 0) {
             for (var i = 0; i < this.examplesButtons.length; i++) {
-                if(selected)
+                if (selected)
                     this.examplesButtons[i].parentElement.classList.add("selected");
                 else
                     this.examplesButtons[i].parentElement.classList.remove("selected");
             }
         }
     };
-}
+}

Playground/js/main.js

@@ -548,69 +548,6 @@ class Main {
                     this.scripts.sort(sortScriptsList);
 
                     if (exampleList) {
-                        for (var i = 0; i < this.scripts.length; i++) {
-                            this.scripts[i].samples.sort(sortScriptsList);
-
-                            var exampleCategory = document.createElement("div");
-                            exampleCategory.classList.add("categoryContainer");
-
-                            var exampleCategoryTitle = document.createElement("p");
-                            exampleCategoryTitle.innerText = this.scripts[i].title;
-                            exampleCategory.appendChild(exampleCategoryTitle);
-
-                            for (var ii = 0; ii < this.scripts[i].samples.length; ii++) {
-                                var example = document.createElement("div");
-                                example.classList.add("itemLine");
-                                example.id = ii;
-
-                                var exampleImg = document.createElement("img");
-                                exampleImg.setAttribute("data-src", this.scripts[i].samples[ii].icon.replace("icons", "https://doc.babylonjs.com/examples/icons"));
-                                exampleImg.setAttribute("onClick", "document.getElementById('PGLink_" + this.scripts[i].samples[ii].PGID + "').click();");
-
-                                var exampleContent = document.createElement("div");
-                                exampleContent.classList.add("itemContent");
-                                exampleContent.setAttribute("onClick", "document.getElementById('PGLink_" + this.scripts[i].samples[ii].PGID + "').click();");
-
-                                var exampleContentLink = document.createElement("div");
-                                exampleContentLink.classList.add("itemContentLink");
-
-                                var exampleTitle = document.createElement("h3");
-                                exampleTitle.classList.add("exampleCategoryTitle");
-                                exampleTitle.innerText = this.scripts[i].samples[ii].title;
-                                var exampleDescr = document.createElement("div");
-                                exampleDescr.classList.add("itemLineChild");
-                                exampleDescr.innerText = this.scripts[i].samples[ii].description;
-
-                                var exampleDocLink = document.createElement("a");
-                                exampleDocLink.classList.add("itemLineDocLink");
-                                exampleDocLink.innerText = "Documentation";
-                                exampleDocLink.href = this.scripts[i].samples[ii].doc;
-                                exampleDocLink.target = "_blank";
-
-                                var examplePGLink = document.createElement("a");
-                                examplePGLink.id = "PGLink_" + this.scripts[i].samples[ii].PGID;
-                                examplePGLink.classList.add("itemLinePGLink");
-                                examplePGLink.innerText = "Display";
-                                examplePGLink.href = this.scripts[i].samples[ii].PGID;
-                                examplePGLink.addEventListener("click", function () {
-                                    location.href = this.href;
-                                    location.reload();
-                                });
-
-                                exampleContentLink.appendChild(exampleTitle);
-                                exampleContentLink.appendChild(exampleDescr);
-                                exampleContent.appendChild(exampleContentLink);
-                                exampleContent.appendChild(exampleDocLink);
-                                exampleContent.appendChild(examplePGLink);
-
-                                example.appendChild(exampleImg);
-                                example.appendChild(exampleContent);
-
-                                exampleCategory.appendChild(example);
-                            }
-
-                            exampleList.appendChild(exampleCategory);
-                        }
 
                         var noResultContainer = document.createElement("div");
                         noResultContainer.id = "noResultsContainer";
@@ -1133,9 +1070,15 @@ class Main {
 
                         this.updateMetadata();
 
+                        var code = JSON.parse(snippet.jsonPayload).code.toString();
+                        var editorSpace = document.getElementById('jsEditor');
+                        if (editorSpace) {
+                            editorSpace.innerHTML = '<pre class="loading-pre">' + code + "</pre>";
+                        }
+
                         this.parent.monacoCreator.addOnMoncaoLoadedCallback(function () {
                             this.parent.monacoCreator.BlockEditorChange = true;
-                            this.parent.monacoCreator.JsEditor.setValue(JSON.parse(snippet.jsonPayload).code.toString());
+                            this.parent.monacoCreator.JsEditor.setValue(code);
 
                             this.parent.monacoCreator.JsEditor.setPosition({
                                 lineNumber: 0,

Playground/js/monacoCreator.js

@@ -380,6 +380,7 @@ class MonacoCreator {
             }
         };
         editorOptions.minimap.enabled = document.getElementById("minimapToggle1280").classList.contains('checked');
+        document.getElementById('jsEditor').innerHTML = "";
         this.jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions);
         this.jsEditor.setValue(oldCode);