From 1d800bb664bd058ababfc71d7d18843702474ae3 Mon Sep 17 00:00:00 2001 From: Tyler Barnes Date: Tue, 26 Mar 2019 20:04:20 -0700 Subject: [PATCH] fix: prevent page from flickering on load if shouldRender is false, it prevents the page from rendering. By default it was set to false and then after the delay it was set to true. When there was no transition, the delay would be set to 0. This caused occasional flickering on first load. It wasn't noticeable until persistent footers were introduced. This fixes that issue --- src/components/delayTransitionRender.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/delayTransitionRender.js b/src/components/delayTransitionRender.js index b898588..7c26113 100644 --- a/src/components/delayTransitionRender.js +++ b/src/components/delayTransitionRender.js @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import { setTimeout } from "requestanimationframe-timer"; export default function delayTransitionRender(WrappedComponent) { class DelayedTransitionWrapper extends Component { @@ -6,7 +7,10 @@ export default function delayTransitionRender(WrappedComponent) { super(props); this.state = { - shouldRender: false + // if there is a delay, set shouldRender to false + // then in componentdid mount shouldRender becomes true + // after the delay. + shouldRender: !!!this.props.delay }; }