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

* 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

packages/learn/src/pages/404.js

@@ -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 = () => (
+  componentDidMount() {
+    this.updateQuote();
+  }
+
+  updateQuote() {
+    this.setState({
+      randomQuote: quotes[Math.floor(Math.random() * quotes.length)]
+    });
+  }
+
+  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>
-    <p>We couldn't find what you were looking for, but here is a quote:</p>
+        {
-
+          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>
-        {randomQuote.quote}
+                  {this.state.randomQuote.quote}
                 </p>
-      <p className='author'>- {randomQuote.author}</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;