new routes + loading

src/App.js

@@ -2,7 +2,12 @@ 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 SerieTV = lazy(() => import('./routes/SerieTV'));
@@ -10,10 +15,10 @@ 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 (
@@ -28,6 +33,7 @@ class App extends React.Component {
                         <Route path="/Musica" component={Musica}/>
                         <Route path="/Giochi" component={Giochi}/>
                         <Route path="/Programmi" component={Programmi}/>
+                        <Route path="/Pannocchiacattiva" component={Pannocchiacattiva}/>
 
                         <Route component={NotFound} />
                     </Switch>

src/routes/Loading.js

@@ -3,15 +3,20 @@ import Navbar from '../Navbar';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
 import "./centercontainer.css"
+import images from "./loadinggifs/images"
 
 class Loading extends React.Component {
     render() {
+        let randomGif = () => {
+            return images[3]
+        }
+        console.log(randomGif())
         return (
             <>
                 <Navbar brand="LOADING" />
                 <div className="centered">
                     <div className="row">
-                        <img alt="Loading..." src="https://i.pinimg.com/originals/8f/c3/21/8fc32146cbf72ae17430e05ecc8b61be.gif" />
+                        <img alt="Loading..." src={randomGif()} />
                     </div>
                 </div>
             </>

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/loadinggifs/images.js

@@ -0,0 +1,8 @@
+const images = [
+    './loadinggifs/loading1.gif',
+    './loadinggifs/loading2.gif',
+    './loadinggifs/loading3.gif',
+    './loadinggifs/loading4.gif',
+  ];
+  
+export default images;