ui-layout-manager-dev 0.0.30-dev → 0.0.32-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.30-dev",
+  "version": "0.0.32-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/Components/RootContainer/RootContainer.jsx

@@ -30,13 +30,13 @@ export const RootContainer = () => {
     const timerRef = useRef(null);
     const resizingRef = useRef(false);
     const loadingOverlayRef = useRef(null);
-    const [showOverlay, setShowOverlay] = useState(true);
+    const [showLoadingScreen, setShowLoadingScreen] = useState(true);
 
     // Create the container API that will be used by the controller.
     const rootContainerAPI = useRef({});
     rootContainerAPI.current = {
-        hideOverlay: () => {
-            setShowOverlay(false);
+        hideLoadingScreen: () => {
+            setShowLoadingScreen(false);
         }
     };
 
@@ -124,7 +124,7 @@ export const RootContainer = () => {
                 observer.disconnect();
             }
         }
-    }, [layoutController, setShowOverlay, showOverlay]);
+    }, [layoutController]);
 
     const sensors = useSensors(
         useSensor(PointerSensor, {
@@ -153,7 +153,7 @@ export const RootContainer = () => {
             onDragEnd={dragController.onDragEnd}
             onDragCancel={dragController.onDragCancel}>
             
-            {showOverlay && <div className="loading-overlay" ref={loadingOverlayRef}>
+            {showLoadingScreen && <div className="loading-overlay" ref={loadingOverlayRef}>
                 <div className="loading-bar">
                     <div className="loading-bar-fill"></div>
                 </div>

package/src/components/LayoutManager/Components/RootContainer/RootContainer.scss

@@ -7,8 +7,8 @@
 
 .relative-container {
     position: relative;
-    display:flex;
-    width:100%;
+    display: flex;
+    width: 100%;
     height: 100%;
     overflow: hidden;
 }
@@ -33,30 +33,31 @@
 }
 
 .loading-bar {
-  width: 100%;
-  height: 4px;
-  background: #1a1a1a;
-  overflow: hidden;
-  position: relative;
-  border-radius: 999px;
+    width: 100%;
+    height: 4px;
+    background: #1a1a1a;
+    overflow: hidden;
+    position: relative;
+    border-radius: 999px;
 }
 
 .loading-bar-fill {
-  position: absolute;
-  top: 0;
-  left: -40%;
-  width: 40%;
-  height: 100%;
-  background: #4da3ff;
-  border-radius: 999px;
-  animation: loading-slide 1.2s infinite ease-in-out;
+    position: absolute;
+    top: 0;
+    left: -40%;
+    width: 40%;
+    height: 100%;
+    background: #4da3ff;
+    border-radius: 999px;
+    animation: loading-slide 1.2s infinite ease-in-out;
 }
 
 @keyframes loading-slide {
-  0% {
-    left: -40%;
-  }
-  100% {
-    left: 100%;
-  }
+    0% {
+        left: -40%;
+    }
+
+    100% {
+        left: 100%;
+    }
 }

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

@@ -171,6 +171,8 @@ export class LayoutController {
             };
             if (isInitial) {
                 this.layoutLoaded = true;
+                // After initial layout is applied, we can hide the loading screen.
+                this.containers["root"].current.hideLoadingScreen();
             }
         });
     };
@@ -185,8 +187,6 @@ export class LayoutController {
             case LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX:
                 transformations = event.data.data;
                 this.applyTransformations(transformations, true);
-                // After initial layout is applied, we can hide the loading overlay.
-                this.containers["root"].current.hideOverlay();
                 break;
             case LAYOUT_WORKER_PROTOCOL.TRANSFORMATIONS:
                 transformations = event.data.data;