ADD : top loader

package.json

@@ -11,6 +11,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
+    "react-top-loading-bar": "^2.3.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -3,6 +3,8 @@ import './App.css';
 import React, { Component } from 'react'
 import NavBar from './components/NavBar';
 import News from './components/News';
+import LoadingBar from 'react-top-loading-bar'
+
 
 import {
   BrowserRouter as Router,
@@ -12,21 +14,33 @@ import {
 
 
 export default class App extends Component {
-  pageSize = 8
+  pageSize = 8 ;
+
+  state = {progress: 0}
+
+  setProgress = (progress) => {
+    this.setState({progress: progress})
+  }
+
   render() {
     return (
       <div>
         <Router>
         <NavBar />
+        <LoadingBar
+        color='#f11946'
+        progress={this.state.progress}
+        onLoaderFinished={() => this.setProgress(0)}
+      />
         <Routes>
-        <Route exact path='/' element={<News key="general" pageSize={this.pageSize} country={'in'} category={'general'} />}></Route> 
-          <Route exact path='/home' element={<News key="general" pageSize={this.pageSize} country={'in'} category={'general'} />}></Route> 
-          <Route exact path='/business' element={<News key="business" pageSize={this.pageSize} country={'in'} category={'business'} />}></Route>
-          <Route exact path='/entertainment' element={<News key="entertainment" pageSize={this.pageSize} country={'in'} category={'entertainment'} />}></Route>
-          <Route exact path='/health' element={<News key="health" pageSize={this.pageSize} country={'in'} category={'health'} />} ></Route>
-          <Route exact path='/science' element={<News key="science" pageSize={this.pageSize} country={'in'} category={'science'} />}></Route>
-          <Route exact path='/sports' element={<News key='sports' pageSize={this.pageSize} country={'in'} category={'sports'} />}></Route>
-          <Route exact path='/technology' element={<News key='technology' pageSize={this.pageSize} country={'in'} category={'technology'} />}></Route>
+        <Route exact path='/' element={<News setProgress={this.setProgress} key="general" pageSize={this.pageSize} country={'in'} category={'general'} />}></Route> 
+          <Route exact path='/home' element={<News setProgress={this.setProgress} key="general" pageSize={this.pageSize} country={'in'} category={'general'} />}></Route> 
+          <Route exact path='/business' element={<News setProgress={this.setProgress} key="business" pageSize={this.pageSize} country={'in'} category={'business'} />}></Route>
+          <Route exact path='/entertainment' element={<News setProgress={this.setProgress} key="entertainment" pageSize={this.pageSize} country={'in'} category={'entertainment'} />}></Route>
+          <Route exact path='/health' element={<News setProgress={this.setProgress} key="health" pageSize={this.pageSize} country={'in'} category={'health'} />} ></Route>
+          <Route exact path='/science' element={<News setProgress={this.setProgress} key="science" pageSize={this.pageSize} country={'in'} category={'science'} />}></Route>
+          <Route exact path='/sports' element={<News setProgress={this.setProgress} key='sports' pageSize={this.pageSize} country={'in'} category={'sports'} />}></Route>
+          <Route exact path='/technology' element={<News setProgress={this.setProgress} key='technology' pageSize={this.pageSize} country={'in'} category={'technology'} />}></Route>
         </Routes>
         </Router>
       </div>

src/components/News.js

@@ -51,20 +51,24 @@ export class News extends Component {
     };
 
     async fetchNewsData(page) {
+        this.props.setProgress(10) ;
         let todayDate = this.getCurrentDate();
         const url =
             `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&from=${todayDate}&sortBy=publishedAt&apiKey=7d248d9c8ea64fa6a4691432a30a74ac&pageSize=${this.props.pageSize}&page=` +
             page;
         console.log(url);
         this.setState({ loading: true });
         let data = await fetch(url);
+        this.props.setProgress(30) ;
         let parsedData = await data.json();
+        this.props.setProgress(70) ;
         console.log(parsedData);
         this.setState({ loading: false });
         this.setState({
             articles: parsedData.articles,
             total_results: parsedData.totalResults,
         });
+        this.props.setProgress(100) ;
     }
 
     showNextButton() {