ui-layout-manager-dev 0.0.29-dev → 0.0.31-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.29-dev",
+  "version": "0.0.31-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, setShowLoadingScreen, showLoadingScreen]);
 
     const sensors = useSensors(
         useSensor(PointerSensor, {
@@ -153,7 +153,11 @@ export const RootContainer = () => {
             onDragEnd={dragController.onDragEnd}
             onDragCancel={dragController.onDragCancel}>
             
-                {showOverlay && <div className="loading-overlay" ref={loadingOverlayRef}></div>}
+            {showLoadingScreen && <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

@@ -7,12 +7,18 @@
 
 .relative-container {
     position: relative;
-    display:flex;
-    width:100%;
+    display: flex;
+    width: 100%;
     height: 100%;
     overflow: hidden;
 }
 
+.drag-overlay {
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+}
+
 .loading-overlay {
     position: absolute;
     top: 0;
@@ -22,12 +28,36 @@
     background-color: #1a1a1a;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: self-start;
     z-index: 9999;
 }
 
-.drag-overlay {
-    position: fixed;
-    pointer-events: none;
-    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,9 +185,8 @@ 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();
+                // After initial layout is applied, we can hide the loading screen.
+                this.containers["root"].current.hideLoadingScreen();
                 break;
             case LAYOUT_WORKER_PROTOCOL.TRANSFORMATIONS:
                 transformations = event.data.data;