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;