From ed01ae22c7bcd0ebfffe91d305c4f4715b2634b6 Mon Sep 17 00:00:00 2001
From: enrico <enrico@fedora.windrunner.lan>
Date: Tue, 14 Jan 2020 21:46:12 +0100
Subject: [PATCH] loading + notfound pages WIP

---
 src/App.js                     |  3 ++-
 src/routes/Loading.js          | 22 ++++++++++++++++++++++
 src/routes/NotFound.js         |  9 ++++++++-
 src/routes/centercontainer.css | 15 +++++++++++++++
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/Loading.js
 create mode 100644 src/routes/centercontainer.css

diff --git a/src/App.js b/src/App.js
index 5405f86..e18f48c 100644
--- a/src/App.js
+++ b/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}/>
diff --git a/src/routes/Loading.js b/src/routes/Loading.js
new file mode 100644
index 0000000..2c8543b
--- /dev/null
+++ b/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;
diff --git a/src/routes/NotFound.js b/src/routes/NotFound.js
index b65408f..3d42f9d 100644
--- a/src/routes/NotFound.js
+++ b/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>
             </>
         );
     }
diff --git a/src/routes/centercontainer.css b/src/routes/centercontainer.css
new file mode 100644
index 0000000..9473f8a
--- /dev/null
+++ b/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;
+}
\ No newline at end of file