ui-layout-manager-dev 0.0.28-dev → 0.0.29-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.28-dev",
+  "version": "0.0.29-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

@@ -29,10 +29,16 @@ export const RootContainer = () => {
     const rootRef = useRef(null);
     const timerRef = useRef(null);
     const resizingRef = useRef(false);
+    const loadingOverlayRef = useRef(null);
+    const [showOverlay, setShowOverlay] = useState(true);
 
     // Create the container API that will be used by the controller.
     const rootContainerAPI = useRef({});
-    rootContainerAPI.current = {};
+    rootContainerAPI.current = {
+        hideOverlay: () => {
+            setShowOverlay(false);
+        }
+    };
 
     const [childElements, setChildElements] = useState(null);
 
@@ -118,7 +124,7 @@ export const RootContainer = () => {
                 observer.disconnect();
             }
         }
-    }, [layoutController]);
+    }, [layoutController, setShowOverlay, showOverlay]);
 
     const sensors = useSensors(
         useSensor(PointerSensor, {
@@ -147,6 +153,7 @@ export const RootContainer = () => {
             onDragEnd={dragController.onDragEnd}
             onDragCancel={dragController.onDragCancel}>
             
+                {showOverlay && <div className="loading-overlay" ref={loadingOverlayRef}></div>}
             <div className="root-container">
                 <div ref={rootRef} className="relative-container">
                     {childElements}

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

@@ -13,6 +13,19 @@
     overflow: hidden;
 }
 
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1a1a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
 .drag-overlay {
     position: fixed;
     pointer-events: none;

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

@@ -185,6 +185,9 @@ export class LayoutController {
             case LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX:
                 transformations = event.data.data;
                 this.applyTransformations(transformations, true);
+                // TODO: Only make containers visible after the layout
+                // is applied to avoid glitchy rendering.
+                this.containers["root"].current.hideOverlay();
                 break;
             case LAYOUT_WORKER_PROTOCOL.TRANSFORMATIONS:
                 transformations = event.data.data;