Fix side menu blinking on refresh (#82)

Author: IlyaKhD

templates/react/application/src/components/side-navigation-menu/side-navigation-menu.js

@@ -11,6 +11,7 @@ class SideNavigationMenu extends React.Component {
       children,
       selectedItemChanged,
       selectedItem,
+      onMenuReady,
       ...rest
     } = this.props;
     return (
@@ -26,7 +27,7 @@ class SideNavigationMenu extends React.Component {
             {...rest}
             onInitialized={this.onMenuInitialized}
             onItemClick={selectedItemChanged}
-            onContentReady={this.updateSelection}
+            onContentReady={this.onTreeViewReady}
             onSelectionChanged={this.updateSelection}
             selectByClick
             selectionMode={'single'}
@@ -91,6 +92,11 @@ class SideNavigationMenu extends React.Component {
       }
     }
   }
+
+  onTreeViewReady = (...args) => {
+    this.props.onMenuReady && this.props.onMenuReady(...args);
+    this.updateSelection(...args);
+  }
 }
 
 export default SideNavigationMenu;

templates/react/application/src/components/side-navigation-menu/side-navigation-menu.scss

@@ -87,3 +87,8 @@
     // ##
   }
 }
+
+.dx-drawer-overlap.pre-init-blink-fix {
+  @import "../../utils/patches.scss";
+  @include menu-pre-init-patch;
+}

templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.js

@@ -7,6 +7,7 @@ import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-inner-toolbar.scss';
 import { sizes, subscribe, unsubscribe } from '../../utils/media-query';
 import { Template } from 'devextreme-react/core/template';
+import { menuPreInitPatch } from '../../utils/patches';
 
 class SideNavInnerToolbar extends React.Component {
   constructor(props) {
@@ -17,6 +18,8 @@ class SideNavInnerToolbar extends React.Component {
       temporaryMenuOpened: false,
       ...this.drawerConfig
     };
+
+    this.menuPatch = menuPreInitPatch(this);
   }
 
   render() {
@@ -32,7 +35,7 @@ class SideNavInnerToolbar extends React.Component {
     return (
       <div className={'side-nav-inner-toolbar'}>
         <Drawer
-          className={'drawer'}
+          className={'drawer' + this.menuPatch.cssClass}
           position={'before'}
           closeOnOutsideClick={this.closeDrawer}
           openedStateMode={menuMode}
@@ -69,6 +72,7 @@ class SideNavInnerToolbar extends React.Component {
               className={'dx-swatch-additional'}
               selectedItemChanged={this.navigationChanged}
               openMenu={this.navigationClick}
+              onMenuReady={this.menuPatch.onReady}
             >
               <Toolbar id={'navigation-header'}>
                 <Item

templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.js

@@ -6,6 +6,7 @@ import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-outer-toolbar.scss';
 import { sizes, subscribe, unsubscribe } from '../../utils/media-query';
 import { Template } from 'devextreme-react/core/template';
+import { menuPreInitPatch } from '../../utils/patches';
 
 class SideNavOuterToolbar extends React.Component {
   constructor(props) {
@@ -16,6 +17,8 @@ class SideNavOuterToolbar extends React.Component {
       temporaryMenuOpened: false,
       ...this.drawerConfig
     };
+
+    this.menuPatch = menuPreInitPatch(this);
   }
 
   render() {
@@ -41,7 +44,7 @@ class SideNavOuterToolbar extends React.Component {
         />
 
         <Drawer
-          className={'layout-body'}
+          className={'layout-body' + this.menuPatch.cssClass}
           position={'before'}
           closeOnOutsideClick={this.closeDrawer}
           openedStateMode={menuMode}
@@ -71,6 +74,7 @@ class SideNavOuterToolbar extends React.Component {
               className={'dx-swatch-additional'}
               selectedItemChanged={this.navigationChanged}
               openMenu={this.navigationClick}
+              onMenuReady={this.menuPatch.onReady}
             />
           </Template>
         </Drawer>

templates/react/application/src/utils/patches.js

@@ -0,0 +1,23 @@
+export function menuPreInitPatch(component) {
+    const menuOpened = component.state.menuOpened;
+    component.state.preInitCssFix = true;
+    return {
+        get cssClass() {
+            if (menuOpened) {
+                return "";
+            }
+
+            return (component.state.preInitCssFix ? " pre-init-blink-fix" : "");
+        },
+
+        onReady() {
+            if (menuOpened) {
+                return;
+            }
+
+            setTimeout(() => {
+                component.setState({ preInitCssFix: false });
+            });
+        }
+    };
+}

templates/react/application/src/utils/patches.scss

@@ -0,0 +1,22 @@
+@import "../../themes/generated/variables.additional.scss";
+
+@mixin menu-pre-init-patch {
+    $menuMinSize: 60px;
+  
+    .dx-drawer-content {
+      padding-left: $menuMinSize;
+    }
+  
+    .dx-drawer-panel-content.dx-overlay::before {
+      content: "";
+      width: $menuMinSize;
+      height: 100%;
+      display: inline-block;
+      position: absolute;
+      background-color: $base-bg;
+    }
+  
+    .dx-overlay-content {
+      width: $menuMinSize !important;
+    }
+}