new routes + loading

master
Enri1196 2020-03-08 17:12:11 +01:00
parent ed01ae22c7
commit a30540059b
8 changed files with 68 additions and 3 deletions

View File

@ -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>

View File

@ -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>
</>

View File

@ -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;

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 679 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB