Skip to content
This repository has been archived by the owner on Sep 20, 2023. It is now read-only.

Commit

Permalink
fix: prevent page from flickering on load
Browse files Browse the repository at this point in the history
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
  • Loading branch information
Tyler Barnes committed Mar 27, 2019
1 parent 878c8f5 commit 1d800bb
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion src/components/delayTransitionRender.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React, { Component } from "react";
import { setTimeout } from "requestanimationframe-timer";

export default function delayTransitionRender(WrappedComponent) {
class DelayedTransitionWrapper extends Component {
constructor(props) {
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
};
}

Expand Down

0 comments on commit 1d800bb

Please sign in to comment.