ui-layout-manager-dev 0.0.28-dev → 0.0.30-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.28-dev",
+  "version": "0.0.30-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,11 @@ export const RootContainer = () => {
             onDragEnd={dragController.onDragEnd}
             onDragCancel={dragController.onDragCancel}>
             
+            {showOverlay && <div className="loading-overlay" ref={loadingOverlayRef}>
+                <div className="loading-bar">
+                    <div className="loading-bar-fill"></div>
+                </div>
+            </div>}
             <div className="root-container">
                 <div ref={rootRef} className="relative-container">
                     {childElements}

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

@@ -18,3 +18,45 @@
     pointer-events: none;
     z-index: 9999;
 }
+
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1a1a;
+    display: flex;
+    justify-content: center;
+    align-items: self-start;
+    z-index: 9999;
+}
+
+.loading-bar {
+  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;
+}
+
+@keyframes loading-slide {
+  0% {
+    left: -40%;
+  }
+  100% {
+    left: 100%;
+  }
+}

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

@@ -185,6 +185,8 @@ 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;