imported loading gifs

src/App.js

@@ -1,6 +1,6 @@
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import React, { Suspense, lazy } from 'react';
-import Loading from "./routes/Loading"
+import Loading from "./routes/Loading";
 
 //const Home = lazy(() => import('./routes/Home'));
 const Home = lazy(() => {

src/routes/Loading.js

@@ -2,15 +2,26 @@ 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 images from "./loadinggifs/images"
+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 = () => {
-            return images[3]
-        }
+            let images = [loading1, loading2, loading3, loading4]
+            return images[randInt()];
+        };
+
         console.log(randomGif())
+
         return (
             <>
                 <Navbar brand="LOADING" />

src/routes/loadinggifs/images.js

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