Improve nme loading time

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -286,7 +286,9 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
             { label: "Strict", value: AbstractMesh.OCCLUSION_TYPE_STRICT },
         ];
 
-        var materialOptions = scene.materials.map((m, i) => {
+        let sortedMaterials = scene.materials.slice(0).sort((a, b) => a.name.localeCompare(b.name));
+
+        var materialOptions = sortedMaterials.map((m, i) => {
             return {
                 label: m.name,
                 value: i
@@ -330,12 +332,12 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                                 if (value < 0) {
                                     mesh.material = null;
                                 } else {
-                                    mesh.material = scene.materials[value];
+                                    mesh.material = sortedMaterials[value];
                                 }
 
                                 this.forceUpdate();
                             }}
-                            extractValue={() => mesh.material ? scene.materials.indexOf(mesh.material) : -1}
+                            extractValue={() => mesh.material ? sortedMaterials.indexOf(mesh.material) : -1}
                             onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         mesh.isAnInstance &&

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -56,7 +56,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
         });
     }
 
-    componentWillReceiveProps() {
+    componentWillUnmount() {
         this.props.globalState.onBuiltObservable.remove(this._onBuiltObserver);
     }
 

nodeEditor/src/diagram/graphCanvas.tsx

@@ -57,6 +57,7 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
     private _oldY = -1;
 
     public _frameIsMoving = false;
+    public _isLoading = false;
 
     public get gridSize() {
         return this._gridSize;

nodeEditor/src/diagram/graphNode.ts

@@ -228,7 +228,7 @@ export class GraphNode {
     }
     
     private _refreshFrames() {       
-        if (this._ownerCanvas._frameIsMoving) {
+        if (this._ownerCanvas._frameIsMoving || this._ownerCanvas._isLoading) {
             return;
         }
         
@@ -237,7 +237,11 @@ export class GraphNode {
             frame.syncNode(this);
         }
     }
-    private _refreshLinks() {
+
+    public _refreshLinks() {
+        if (this._ownerCanvas._isLoading) {
+            return;
+        }
         for (var link of this._links) {
             link.update();
         }

nodeEditor/src/graphEditor.tsx

@@ -30,7 +30,7 @@ interface IGraphEditorProps {
     globalState: GlobalState;
 }
 
-type State = {
+interface IGraphEditorState {
     showPreviewPopUp: boolean;
 };
 
@@ -42,7 +42,7 @@ interface IInternalPreviewAreaOptions extends IInspectorOptions {
     embedHostWidth?: string;
 }
 
-export class GraphEditor extends React.Component<IGraphEditorProps, State> {
+export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
     private readonly NodeWidth = 100;
     private _graphCanvas: GraphCanvasComponent;
 
@@ -64,11 +64,6 @@ export class GraphEditor extends React.Component<IGraphEditorProps, State> {
     private _previewHost: Nullable<HTMLElement>;
     private _popUpWindow: Window;
 
-
-    public readonly state: State = {
-        showPreviewPopUp: false
-    };
-
     /**
      * Creates a node and recursivly creates its parent nodes from it's input
      * @param nodeMaterialBlock 
@@ -387,7 +382,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps, State> {
     }
 
     build() {        
-        let editorData = this.props.globalState.nodeMaterial.editorData;
+        let editorData = this.props.globalState.nodeMaterial.editorData;        
+        this._graphCanvas._isLoading = true; // Will help loading large graphes
 
         if (editorData instanceof Array) {
             editorData = {
@@ -428,24 +424,43 @@ export class GraphEditor extends React.Component<IGraphEditorProps, State> {
         this.reOrganize(editorData);
     }
 
+    showWaitScreen() {
+        this.props.globalState.hostDocument.querySelector(".wait-screen")?.classList.remove("hidden");
+    }
+
+    hideWaitScreen() {
+        this.props.globalState.hostDocument.querySelector(".wait-screen")?.classList.add("hidden");
+    }
+
     reOrganize(editorData: Nullable<IEditorData> = null) {
-        if (!editorData || !editorData.locations) {
-            this._graphCanvas.distributeGraph();
-        } else {
-            // Locations
-            for (var location of editorData.locations) {
-                for (var node of this._graphCanvas.nodes) {
-                    if (node.block && node.block.uniqueId === location.blockId) {
-                        node.x = location.x;
-                        node.y = location.y;
-                        node.cleanAccumulation();
-                        break;
+        this.showWaitScreen();
+        this._graphCanvas._isLoading = true; // Will help loading large graphes
+
+        setTimeout(() => {
+            if (!editorData || !editorData.locations) {
+                this._graphCanvas.distributeGraph();
+            } else {
+                // Locations
+                for (var location of editorData.locations) {
+                    for (var node of this._graphCanvas.nodes) {
+                        if (node.block && node.block.uniqueId === location.blockId) {
+                            node.x = location.x;
+                            node.y = location.y;
+                            node.cleanAccumulation();
+                            break;
+                        }
                     }
                 }
+
+                this._graphCanvas.processEditorData(editorData);
             }
 
-            this._graphCanvas.processEditorData(editorData);
-        }
+            this._graphCanvas._isLoading = false;
+            for (var node of this._graphCanvas.nodes) {
+                node._refreshLinks();
+            }
+            this.hideWaitScreen();
+        });
     }
 
     onPointerDown(evt: React.PointerEvent<HTMLDivElement>) {
@@ -762,7 +777,7 @@ export class GraphEditor extends React.Component<IGraphEditorProps, State> {
                         onDragOver={event => {
                             event.preventDefault();
                         }}
-                    >
+                    >                        
                         <GraphCanvasComponent ref={"graphCanvas"} globalState={this.props.globalState}/>
                     </div>
 
@@ -785,6 +800,9 @@ export class GraphEditor extends React.Component<IGraphEditorProps, State> {
                 <div className="blocker">
                     Node Material Editor runs only on desktop
                 </div>
+                <div className="wait-screen hidden">
+                    Processing...please wait
+                </div>
             </Portal>
         );
     }

nodeEditor/src/main.scss

@@ -7,6 +7,25 @@
     font: 14px "acumin-pro";   
 }
 
+.wait-screen {
+    display: grid;
+    justify-content: center;
+    align-content: center;
+    height: 100%;
+    width: 100%;
+    background: #464646;
+    opacity: 0.95;
+    color:white;
+    font: 24px "acumin-pro";  
+    position: absolute;
+    top: 0;
+    left: 0; 
+
+    &.hidden {
+        visibility: hidden;
+    }
+}
+
 #nodeList {
     grid-row: 1 / span 2;
     grid-column: 1;