From 52e82214f5824197b140998b010dfcd2a340c95f Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Fri, 30 Aug 2019 17:35:49 +0200
Subject: [PATCH] =?UTF-8?q?:art::bug:=20Emp=C3=A9che=20l'effet=20de=20clig?=
 =?UTF-8?q?notement=20de=20la=20section=20de=20navigation=20au=20chargemen?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Effet FOUC
---
 index.html                                             |  2 --
 source/Provider.js                                     |  4 ++--
 .../mon-entreprise.fr/layout/Navigation/SideBar.css    |  6 +++---
 .../mon-entreprise.fr/layout/Navigation/SideBar.js     | 10 +++++-----
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 1e0881f2d..14b5d51de 100644
--- a/index.html
+++ b/index.html
@@ -98,8 +98,6 @@
 			/* Prevent FOUC effect */
 			#js {
 				opacity: 0;
-				transform: translateY(20px);
-				transition: all 0.4s;
 			}
 
 			/* CSS Loader */
diff --git a/source/Provider.js b/source/Provider.js
index abdc5906b..1cab5bc32 100644
--- a/source/Provider.js
+++ b/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;
diff --git a/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.css b/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.css
index 8f1dbfa2c..fb6d892dd 100644
--- a/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.css
+++ b/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);
diff --git a/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.js b/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.js
index 9bbb7f1af..2cf0377fe 100644
--- a/source/sites/mon-entreprise.fr/layout/Navigation/SideBar.js
+++ b/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