🎨🐛 Empéche l'effet de clignotement de la section de navigation au chargement

Effet FOUC

index.html

@@ -98,8 +98,6 @@
 			/* Prevent FOUC effect */
 			#js {
 				opacity: 0;
-				transform: translateY(20px);
-				transition: all 0.4s;
 			}
 
 			/* CSS Loader */

source/Provider.js

@@ -66,8 +66,8 @@ export default class Provider extends PureComponent {
 		css.type = 'text/css'
 		css.innerHTML = `
 #js {
-	opacity: 1 !important;
-	transform: translateY(0px) !important;
+	animation: appear 0.5s;
+	opacity: 1;
 }
 #loading {
 	display: none !important;

source/sites/mon-entreprise.fr/layout/Navigation/SideBar.css

@@ -3,17 +3,17 @@
 	position: absolute;
 	left: 0;
 	top: 0;
+	transform: translate(-100%);
 	/* let the browser know we plan to animate
 	   each view in and out */
 	will-change: transform;
 	transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
-	transform: translate(-100%);
 	z-index: 1;
 }
-
 .sidebar__container.opened {
-	transform: translateX(0);
+	transform: translate(0%);
 }
+
 .sidebar__container + * {
 	will-change: transform;
 	transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);

source/sites/mon-entreprise.fr/layout/Navigation/SideBar.js

@@ -8,7 +8,7 @@ import { withRouter } from 'react-router'
 import backSvg from './back.svg'
 import mobileMenuSvg from './mobile-menu.svg'
 import './SideBar.css'
-import type { Tracker } from 'Components/utils/withTracker'
+import type Tracker from '../../../../Tracker'
 import type { Location } from 'react-router-dom'
 
 type OwnProps = {|
@@ -79,10 +79,10 @@ class SideBar extends React.Component<Props, State> {
 	render() {
 		return (
 			<div
-				className={classnames(
-					'sidebar__container',
-					this.state.opened && 'opened'
-				)}
+				css="transform: translate(-100%)" // prevent FOUC effect
+				className={classnames('sidebar__container', {
+					opened: this.state.opened
+				})}
 				ref={ref => (this.ref = ref)}>
 				<div className="sidebar">{this.props.children}</div>
 				<button