Spinner control added

src/components/Validators/ValidatorReport.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import { Form, Table, Button} from "react-bootstrap";
+import { Form, Table, Button, Spinner} from "react-bootstrap";
 import axios from "axios";
 import Pagination from 'react-bootstrap/Pagination'
 
 import { alternativeBackendApis } from "../../config"
 
 import { ValidatorApiResponse } from "../../types";
-import { Left } from "react-bootstrap/lib/Media";
 
 interface IProps {
 }
@@ -17,6 +16,7 @@ interface IState {
     blockEnd: number
     page: number,
     search: boolean,
+    loading: boolean,
     apiResponse?: ValidatorApiResponse;
 }
 
@@ -29,7 +29,8 @@ class ValidatorReport extends React.Component<IProps, IState> {
       blockStart: 0,
       blockEnd: 0,
       page: 1,
-      search: false
+      search: false,
+      loading: false
     };
     this.accountTxFilterChanged = this.accountTxFilterChanged.bind(this);
     this.searchClicked = this.searchClicked.bind(this);
@@ -42,7 +43,7 @@ class ValidatorReport extends React.Component<IProps, IState> {
       console.log(`Fetching transactions`);
       const backend = `${alternativeBackendApis}/validator-report?addr=${address}&start_block=${blockStart}&end_block=${blockEnd}&page=${page}`;
 
-      axios.get(backend).then((response) => {this.setState({...this.state, apiResponse: response.data, search: false})});
+      axios.get(backend).then((response) => {this.setState({...this.state, apiResponse: response.data, search: false, loading: false})});
     }
   }
 
@@ -72,19 +73,19 @@ class ValidatorReport extends React.Component<IProps, IState> {
   
   changePage(page: number) {
     if(this.state.page !== page) {
-      this.setState({...this.state, page: page, search: true });
+      this.setState({...this.state, page: page, search: true, loading: true });
     }
   }
 
   searchClicked() {
     if(!this.state.search) {
-      this.setState({...this.state, page: 1, search: true });
+      this.setState({...this.state, page: 1, search: true, loading: true });
     }
   }
 
   render() {
 
-    const { address, blockStart, blockEnd, apiResponse, page } = this.state;
+    const { address, blockStart, blockEnd, apiResponse, page, loading } = this.state;
 
     return (
       <div className="box" style={{textAlign: "left"}}>
@@ -110,7 +111,7 @@ class ValidatorReport extends React.Component<IProps, IState> {
           <Button variant="outline-light" onClick={this.searchClicked}>Search</Button>
         </div>
         <>
-        { !apiResponse ? <div/> :
+        { !apiResponse ? (loading ? <Spinner animation="border" /> : <div/>) :
           (apiResponse.report && apiResponse.report.length == 0) ? <h4>No records found</h4> :
           <>
             <Pagination>
@@ -122,7 +123,7 @@ class ValidatorReport extends React.Component<IProps, IState> {
               }
             </Pagination>
             
-          <Table striped bordered hover size="sm">
+          <Table striped bordered hover size="sm" variant="dark">
             <thead>
               <tr>
                 <th>Era</th>