ui-layout-manager-dev 0.0.36-dev → 0.0.37-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.36-dev",
+  "version": "0.0.37-dev",
   "description": "A react component to manage layout and themes in single page applications.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/LayoutManager/Controller/LayoutController.js

@@ -79,8 +79,7 @@ export class LayoutController {
 
         if (this.registeredContainers === this.numberOfContainers && !this.layoutLoaded) {
             // console.log("All containers registered, layout is ready.");
-            this.sendToWorker(LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX, 
-            { sizes: this.getContainerSizes() });
+            this.sendToWorker(LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX);
         }
     }
     
@@ -179,12 +178,17 @@ export class LayoutController {
                         break;
                 }
             };
-            if (isInitial) {
-                // After the initial transformations have been applied, we can hide
-                // the loading screen for the root container.
+            if (this.layoutLoaded && !isInitial) {
                 this.containers[this.ldf.layoutRoot].current.hideLoadingScreen();
                 console.log("Layout is ready, hiding loading screen.");
             }
+            if (isInitial) {
+                // After the initial style has been applied, we request the worker
+                // to apply layout before we hide the loading screen so containers
+                // are set to correct initial state.
+                this.layoutLoaded = true;
+                this.handleRootResize();
+            }
         });
     };
 

package/src/components/LayoutManager/Controller/Worker/LayoutEditor.js

@@ -19,10 +19,8 @@ export class LayoutEditor {
      * Initializes flexbox layout by processing LDF file.
      * @param {Object} sizes Initial sizes of the containers.
      */
-    initializeFlexBox(sizes) {
-        this.initializeNode(this.ldf.containers[this.ldf.layoutRoot]);   
-        this.sizes = sizes; 
-        this.applyLayoutToNode(this.ldf.layoutRoot);           
+    initializeFlexBox() {
+        this.initializeNode(this.ldf.containers[this.ldf.layoutRoot]);  
         postMessage({
             type: LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX,
             data: this.transformations

package/src/components/LayoutManager/Controller/Worker/LayoutWorker.js

@@ -17,7 +17,7 @@ self.onmessage = function (e) {
                 editor = new LayoutEditor(args.ldf);
                 break;
             case LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX:
-                editor.initializeFlexBox(args.sizes);
+                editor.initializeFlexBox();
                 break;
             case LAYOUT_WORKER_PROTOCOL.APPLY_SIZES:
                 editor.applySizes(args.sizes);