imported loading gifs

src/App.js

@@ -1,21 +1,41 @@
 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 Home = lazy(() => import('./routes/Home'));
+const Home = lazy(() => {
+    return new Promise(resolve => {
+        setTimeout(() => resolve(import("./routes/Home")), 500);
+    });
+});
+const Film = lazy(() => import('./routes/Film'));
 const Anime = lazy(() => import('./routes/Anime'));
-const Notfound = lazy(() => import('./routes/notfound'));
+const SerieTV = lazy(() => import('./routes/SerieTV'));
+const Immagini = lazy(() => import('./routes/Immagini'));
+const Musica = lazy(() => import('./routes/Musica'));
+const Giochi = lazy(() => import('./routes/Giochi'));
+const Programmi = lazy(() => import('./routes/Programmi'));
+const Pannocchiacattiva = lazy(() => import('./routes/Pannocchiacattiva'))
 
+const NotFound = lazy(() => import('./routes/NotFound'));
 
 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}/>
                         <Route path="/Anime" component={Anime}/>
+                        <Route path="/SerieTV" component={SerieTV}/>
+                        <Route path="/Immagini" component={Immagini}/>
+                        <Route path="/Musica" component={Musica}/>
+                        <Route path="/Giochi" component={Giochi}/>
+                        <Route path="/Programmi" component={Programmi}/>
+                        <Route path="/Pannocchiacattiva" component={Pannocchiacattiva}/>
 
-                        <Route component={Notfound} />
+                        <Route component={NotFound} />
                     </Switch>
                 </Suspense>
             </Router>

src/ModalButton.css

@@ -1,4 +1,4 @@
-.videoPlayer {
+.VideoPlayer {
     width: 100%;
     height: 250px;
     background-color: black;

src/ModalButton.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
-import Button from './Buttons';
+import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import './Buttons.css';
 import './ModalButton.css';
@@ -11,16 +11,17 @@ function ModalButton() {
     
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
+
     return (
     <>
-        <Button className="btn1" name="view" onClick={handleShow} />
+        <Button className="btn1" onClick={handleShow} lhref="#">View</Button>
 
         <Modal show={show} onHide={handleClose}>
             <Modal.Header closeButton>
                 <Modal.Title>Card Title</Modal.Title>
             </Modal.Header>
             <Modal.Body>
-                <VideoPlayer />
+                <div className="VideoPlayer"></div>
                 Some quick example text to build on the card title and make up the bulk of the card's content.
             </Modal.Body>
         </Modal>
@@ -28,12 +29,4 @@ function ModalButton() {
     );
 }
 
-class VideoPlayer extends React.Component {
-    render() {
-        return (
-            <div className="videoPlayer"></div>
-        );
-    }
-}
-
 export default ModalButton;

src/Navbar.js

@@ -23,9 +23,9 @@ class Navbar extends React.Component {
                     <NavButton name="Giochi" lhref="/Giochi" />
                     <NavButton name="Programmi" lhref="/Programmi" />
                 </ul>
-                <form class="form-inline my-2 my-lg-0">
-                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
-                    <button class="btn1" type="submit">Search</button>
+                <form className="form-inline my-2 my-lg-0">
+                    <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+                    <button className="btn1" type="submit">Search</button>
                 </form>
             </div>
         </nav>

src/routes/Film.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Film extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="FILM" />
+            </>
+        );
+    }
+}
+
+export default Film;

src/routes/Giochi.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Giochi extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="GIOCHI" />
+            </>
+        );
+    }
+}
+
+export default Giochi;

src/routes/Immagini.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Immagini extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="IMMAGINI" />
+            </>
+        );
+    }
+}
+
+export default Immagini;

src/routes/Loading.js

@@ -0,0 +1,38 @@
+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";
+import loading1 from "./loadinggifs/loading1.gif";
+import loading2 from "./loadinggifs/loading2.gif";
+import loading3 from "./loadinggifs/loading3.gif";
+import loading4 from "./loadinggifs/loading4.gif";
+
+class Loading extends React.Component {
+    render() {
+
+        let randInt = () => {
+            return Math.round(Math.random() * 4);
+        };
+
+        let randomGif = () => {
+            let images = [loading1, loading2, loading3, loading4]
+            return images[randInt()];
+        };
+
+        console.log(randomGif())
+
+        return (
+            <>
+                <Navbar brand="LOADING" />
+                <div className="centered">
+                    <div className="row">
+                        <img alt="Loading..." src={randomGif()} />
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
+
+export default Loading;

src/routes/Musica.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Musica extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="MUSICA" />
+            </>
+        );
+    }
+}
+
+export default Musica;

src/routes/NotFound.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 NotFound extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="404" />
+                <div className="centered">
+                    <div className="row">
+                        <img alt="Loading..." src="https://i.pinimg.com/originals/8f/c3/21/8fc32146cbf72ae17430e05ecc8b61be.gif" />
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
+
+export default NotFound;

src/routes/Pannocchiacattiva.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.min.js';
+import Form from 'react-bootstrap/Form';
+import Col from 'react-bootstrap/Col';
+import '../Buttons.css';
+import Navbar from '../Navbar';
+
+class Pannocchiacattiva extends React.Component {
+    render() {
+        const shiroTexto = {
+            color: 'white'
+        }
+        return (
+            <>
+                <Navbar brand="PANNOCCHIA" />
+                <div className="centered" style={shiroTexto}>
+                    <Form>
+                        <Form.Group controlId="exampleForm.ControlInput1">
+                            <Form.Control type="text" placeholder="Titolo Anime" />
+                        </Form.Group>
+                        <Form.Group controlId="exampleForm.ControlTextarea1">
+                            <Form.Control type="text" placeholder="Trama" as="textarea" rows="3" />
+                        </Form.Group>
+                        <Form.Row>
+                            <Form.Group as={Col} controlId="formGridCity">
+                                <Form.Control type="text" placeholder="Durata" />
+                            </Form.Group>
+
+                            <Form.Group as={Col} controlId="formGridState">
+                                <Form.Control type="text" placeholder="Voto" />
+                            </Form.Group>
+
+                            <Form.Group as={Col} controlId="formGridZip">
+                                <Form.Control type="text" placeholder="Lingua" />
+                            </Form.Group>
+                        </Form.Row>
+                        <button className="btn1">Submit</button>
+                    </Form>
+                </div>
+            </>
+        );
+    }
+}
+
+export default Pannocchiacattiva;

src/routes/Programmi.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class Programmi extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="PROGRAMMI" />
+            </>
+        );
+    }
+}
+
+export default Programmi;

src/routes/SerieTV.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class SerieTV extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="SERIETV" />
+            </>
+        );
+    }
+}
+
+export default SerieTV;

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;
+}

src/routes/notfound.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import Navbar from '../Navbar';
-
-class NotFound extends React.Component {
-    render() {
-        return (
-            <>
-                <Navbar brand="404" />
-                <div><h1>I MEME 404</h1></div>
-            </>
-        );
-    }
-}
-
-export default NotFound;