From 1f6e4e4e45940ed91a6be0920d17c0e6126ef308 Mon Sep 17 00:00:00 2001
From: Kongzibapt <53861741+Kongzibapt@users.noreply.github.com>
Date: Wed, 10 Mar 2021 12:08:33 +0100
Subject: [PATCH] =?UTF-8?q?message=20apr=C3=A8s=20loader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/Components/apploader.css |  6 ++++++
 src/js/Components/AppLoader.js   | 21 +++++++++++++++++----
 src/js/Components/Sort.js        |  4 ++--
 3 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 src/css/Components/apploader.css

diff --git a/src/css/Components/apploader.css b/src/css/Components/apploader.css
new file mode 100644
index 0000000..b8a406e
--- /dev/null
+++ b/src/css/Components/apploader.css
@@ -0,0 +1,6 @@
+#noArticleFound{
+    color:white;
+    text-align: center;
+    font-family: 'Wellfleet',cursive;
+    font-size : 2vw
+}
\ No newline at end of file
diff --git a/src/js/Components/AppLoader.js b/src/js/Components/AppLoader.js
index c94b3a8..3c32e2f 100644
--- a/src/js/Components/AppLoader.js
+++ b/src/js/Components/AppLoader.js
@@ -1,27 +1,40 @@
 import React from 'react';
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
 import Loader from 'react-loader-spinner'
+import '../../css/Components/apploader.css';
 
 class AppLoader extends React.Component {
     constructor(props) {
         super(props);
         this.state={
-            
+            loaderEnd:false
         }
     }
 
+    componentDidMount() {
+        this.endLoader()
+    }
+
+    endLoader = () =>{
+        setTimeout(() => {
+            this.setState({loaderEnd:true})
+        }, 5000);
+        
+    }
+
 
     render() {
         return (
             <div>
+                {!this.state.loaderEnd ? 
                 <Loader
                 type="RevolvingDot"
                 color="white"
                 height={100}
                 width={100}
-                timeout={5000} //3 secs
-        
-              />
+                timeout={5000} //5 secs
+              /> :
+                <div id="noArticleFound">Aucun article n'a été trouvé...</div>}
             </div>
         );
     }
diff --git a/src/js/Components/Sort.js b/src/js/Components/Sort.js
index 4d548a8..1186c4b 100644
--- a/src/js/Components/Sort.js
+++ b/src/js/Components/Sort.js
@@ -96,11 +96,11 @@ class Sort extends Component {
                             </select>
                         </div>
                     </div>
-                    <p id="sortOrder" onClick={this.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
+                    <div id="sortOrder" onClick={this.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
                         {this.state.orderText.split("").map((l) =>
                             <div key={l} className="letter">{l}</div>
                         )}
-                    </p>
+                    </div>
                 </div>
             </div>
         );