loading + notfound pages WIP

src/App.js

@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import React, { Suspense, lazy } from 'react';
+import Loading from "./routes/Loading"
 
 const Home = lazy(() => import('./routes/Home'));
 const Film = lazy(() => import('./routes/Film'));
@@ -17,7 +18,7 @@ class App extends React.Component {
     render() {
         return (
             <Router>
-                <Suspense fallback={<div>Loading...</div>}>
+                <Suspense fallback={<Loading />}>
                     <Switch>
                         <Route exact path="/" component={Home}/>
                         <Route path="/Film" component={Film}/>

src/routes/Loading.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Navbar from '../Navbar';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min.js';
+import "./centercontainer.css"
+
+class Loading extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="LOADING" />
+                <div className="centered">
+                    <div className="row">
+                        <img alt="Loading..." src="https://i.pinimg.com/originals/8f/c3/21/8fc32146cbf72ae17430e05ecc8b61be.gif" />
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
+
+export default Loading;

src/routes/NotFound.js

@@ -1,12 +1,19 @@
 import React from 'react';
 import Navbar from '../Navbar';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min.js';
+import "./centercontainer.css"
 
 class NotFound extends React.Component {
     render() {
         return (
             <>
                 <Navbar brand="404" />
-                <div><h1>I MEME 404</h1></div>
+                <div className="centered">
+                    <div className="row">
+                        <img alt="Loading..." src="https://i.pinimg.com/originals/8f/c3/21/8fc32146cbf72ae17430e05ecc8b61be.gif" />
+                    </div>
+                </div>
             </>
         );
     }

src/routes/centercontainer.css

@@ -0,0 +1,15 @@
+.centered {
+    height: 93vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.row {
+    width: auto;
+}
+
+img {
+    height: 30vh;
+    width: auto;
+}