add loader

src/App.jsx

@@ -2,7 +2,7 @@ import React, {Suspense} from 'react';
 import {BrowserRouter as Router} from 'react-router-dom';
 
 import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
-import Loader from 'react-loader-spinner';
+import Loader from './components/loader';
 
 import Routes from './Routes';
 import Header from './components/layouts/Header';
@@ -10,13 +10,13 @@ import Footer from './components/layouts/Footer';
 import AppContextProvider from './AppContext';
 import {i18n} from './i18n';
 
-const Spinner = (
-  <Loader type="Puff" color="#00BFFF" height={100} width={100} timeout={1000} />
-);
+// const Spinner = (
+//   <Loader type="Puff" color="#00BFFF" height={100} width={100} timeout={1000} />
+// );
 
 function App() {
   return (
-    <Suspense fallback={Spinner}>
+    <Suspense fallback={Loader}>
       <AppContextProvider>
         <Router>
           <div>

src/components/loader/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import logo from './loader-pulse-2.gif';
+import './style.css';
+
+const Loader = () => {
+return (
+<div className="loader">
+	<img src={logo} alt="Loading..." />
+</div>);
+};
+
+
+export default Loader;

src/components/loader/style.css

@@ -0,0 +1,9 @@
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+	
+  /* Preserve aspet ratio */
+  min-width: 100%;
+  min-height: 100%;
+}