diff --git a/packages/app/src/layout.jsx b/packages/app/src/layout.jsx
index 4fc9d542..3e2198c2 100644
--- a/packages/app/src/layout.jsx
+++ b/packages/app/src/layout.jsx
@@ -9,7 +9,7 @@ import publicRoutes from "schemas/publicRoutes"
 
 import Layouts from "layouts"
 
-export default class Layout extends React.Component {
+export default class Layout extends React.PureComponent {
 	progressBar = progressBar.configure({ parent: "html", showSpinner: false })
 
 	state = {
@@ -20,15 +20,37 @@ export default class Layout extends React.Component {
 
 	events = {
 		"app.initialization.start": () => {
+			app.eventBus.emit("layout.render.lock")
+		},
+		"app.initialization.finish": () => {
+			app.eventBus.emit("layout.render.unlock")
+		},
+		"layout.render.lock": () => {
 			this.setState({
 				renderLock: true,
 			})
 		},
-		"app.initialization.finish": () => {
+		"layout.render.unlock": () => {
 			this.setState({
 				renderLock: false,
 			})
 		},
+		"layout.animations.fadeIn": () => {
+			if (app.settings.get("reduceAnimations")) {
+				console.warn("Skipping fadeIn animation due to `reduceAnimations` setting")
+				return false
+			}
+
+			document.querySelector("#transitionLayer").classList.add("fade-opacity-enter")
+		},
+		"layout.animations.fadeOut": () => {
+			if (app.settings.get("reduceAnimations")) {
+				console.warn("Skipping fadeOut animation due to `reduceAnimations` setting")
+				return false
+			}
+
+			document.querySelector("#transitionLayer").classList.add("fade-opacity-leave")
+		},
 		"router.transitionStart": () => {
 			this.progressBar.start()