message après loader

src/css/Components/apploader.css

@@ -0,0 +1,6 @@
+#noArticleFound{
+    color:white;
+    text-align: center;
+    font-family: 'Wellfleet',cursive;
+    font-size : 2vw
+}

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>
         );
     }

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