gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix random page flickering on page load #256 (#264)

Browse Source 
* fix random page flickering on page load #256

* loaded quote in componentDidMount to prevent flickering

* added spinner when quote has not yet loaded

* use better standards
This commit is contained in:
Wadinga Leonard
2018-09-27 12:13:22 +01:00
committed by Mrugesh Mohapatra
parent 848ede28a6
commit ce8b08623e
1 changed files with 48 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/learn/src/pages/404.js
View File

@ -1,33 +1,61 @@
import React from 'react';
import Helmet from 'react-helmet';
import Spinner from 'react-spinkit';
import { Link } from 'gatsby';
import './404.css';
import notFoundLogo from '../../static/img/freeCodeCamp-404.svg';
import { quotes } from '../../static/json/quotes.json';
let randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
class NotFoundPage extends React.Component {
constructor(props) {
super(props);
this.state = {
randomQuote: null
}
}
const NotFoundPage = () => (
<div className='notfound-page-wrapper'>
<Helmet title='Page Not Found | freeCodeCamp' />
componentDidMount() {
this.updateQuote();
}
<img alt='learn to code at freeCodeCamp 404' src={notFoundLogo} />
<h1>NOT FOUND</h1>
<p>We couldn't find what you were looking for, but here is a quote:</p>
updateQuote() {
this.setState({
randomQuote: quotes[Math.floor(Math.random() * quotes.length)]
});
}
<div className='quote-wrapper'>
<p className='quote'>
<span>&#8220;</span>
{randomQuote.quote}
</p>
<p className='author'>- {randomQuote.author}</p>
</div>
<Link className='btn-curriculum' to='/'>
View the Curriculum
</Link>
</div>
);
render() {
return (
<div className='notfound-page-wrapper'>
<Helmet title='Page Not Found | freeCodeCamp' />
<img alt='learn to code at freeCodeCamp 404' src={notFoundLogo} />
<h1>NOT FOUND</h1>
{
this.state.randomQuote ? (
<div>
<p>
We couldn&#x27;t find what you were looking for, but here is a
quote:
</p>
<div className='quote-wrapper'>
<p className='quote'>
<span>&#8220;</span>
{this.state.randomQuote.quote}
</p>
<p className='author'>- {this.state.randomQuote.author}</p>
</div>
</div>
) : (
<Spinner color='#006400' name='ball-clip-rotate-multiple' />
)
}
<Link className='btn-curriculum' to='/'>
View the Curriculum
</Link>
</div>
);
}
}
export default NotFoundPage;