@plurid/plurid-react 0.0.0-28 → 0.0.0-29

package/distribution/index.js

@@ -2100,13 +2100,16 @@ const StyledPluridRoots = styled__default["default"].div`
 `;
 
 const PluridRoots = properties => {
-    const {spaceTransformMatrix: spaceTransformMatrix, spaceAnimatedTransform: spaceAnimatedTransform, spaceTransformTime: spaceTransformTime, stateTree: stateTree} = properties;
+    const {spaceTransformMatrix: spaceTransformMatrix, spaceAnimatedTransform: spaceAnimatedTransform, spaceTransformTime: spaceTransformTime, stateTree: stateTree, stateResolvedLayout: stateResolvedLayout} = properties;
+    const width = "100%";
+    const height = stateResolvedLayout ? window.innerHeight + "px" : 0;
+    const transition = spaceAnimatedTransform ? `transform ${spaceTransformTime}ms ease-in-out` : "initial";
     return React__default["default"].createElement(StyledPluridRoots, {
         style: {
-            width: "100%",
-            height: typeof window !== "undefined" ? window.innerHeight + "px" : "821px",
-            transform: spaceTransformMatrix,
-            transition: spaceAnimatedTransform ? `transform ${spaceTransformTime}ms ease-in-out` : "initial"
+            width: width,
+            height: height,
+            transition: transition,
+            transform: spaceTransformMatrix
         },
         "data-plurid-entity": pluridData.PLURID_ENTITY_ROOTS
     }, stateTree.map((plane => React__default["default"].createElement(ConnectedPluridRoot, {
@@ -2120,7 +2123,8 @@ const mapStateToProperties$g = state => ({
     spaceTransformMatrix: selectors.space.getTransformMatrix(state),
     spaceAnimatedTransform: selectors.space.getAnimatedTransform(state),
     spaceTransformTime: selectors.space.getTransformTime(state),
-    stateTree: selectors.space.getTree(state)
+    stateTree: selectors.space.getTree(state),
+    stateResolvedLayout: selectors.space.getResolvedLayout(state)
 });
 
 const mapDispatchToProperties$g = dispatch => ({});
@@ -5452,6 +5456,30 @@ const PluridScrollTop = styled__default["default"].div`
     width: 0;
 `;
 
+const StyledFadeIn = styled__default["default"].div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: black;
+    pointer-events: none;
+    z-index: 999999;
+`;
+
+const FadeIn = properties => {
+    const [fadedIn, setFadedIn] = React.useState(false);
+    React.useEffect((() => {
+        setTimeout((() => {
+            setFadedIn(true);
+        }), 10);
+    }), []);
+    if (fadedIn) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }
+    return React__default["default"].createElement(StyledFadeIn, null);
+};
+
 const PluridRouterBrowser = properties => {
     const {routes: routes, planes: planes, exterior: exterior, shell: shell, hostname: hostname, scrollToTop: scrollToTop, static: staticContext, view: cleanNavigationView, cleanNavigation: cleanNavigation, notFoundPath: notFoundPathProperty} = properties;
     const notFoundPath = notFoundPathProperty || "/not-found";
@@ -5550,7 +5578,7 @@ const PluridRouterBrowser = properties => {
             PluridRouterShell.displayName = "PluridRouterShell";
         }
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(PluridScrollTop, {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(FadeIn, null), React__default["default"].createElement(PluridScrollTop, {
         ref: topContainer
     }), PluridRouterExterior && React__default["default"].createElement(PluridRouterExterior, {
         matchedRoute: matchedRoute