IO-2261 Add Loading effect

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -41,6 +41,7 @@ export function PaymentsListPaginated({
 }) {
   const search = queryString.parse(useLocation().search);
   const [openSearchResults, setOpenSearchResults] = useState([]);
+  const [searchLoading, setSearchLoading] = useState(false);
   const { page, sortcolumn, sortorder } = search;
   const history = useHistory();
   const [state, setState] = useState({
@@ -185,7 +186,6 @@ export function PaymentsListPaginated({
 
   useEffect(() => {
     if (search.search && search.search.trim() !== "") {
-      //  setLoading(true);
       searchPayments();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -193,6 +193,7 @@ export function PaymentsListPaginated({
 
   async function searchPayments(value) {
     try {
+      setSearchLoading(true);
       const searchData = await axios.post("/search", {
         search: value || search.search,
         index: "payments",
@@ -201,7 +202,7 @@ export function PaymentsListPaginated({
     } catch (error) {
       console.log("Error while fetching search results", error);
     } finally {
-      // setLoading(false);
+      setSearchLoading(false);
     }
   }
 
@@ -242,13 +243,14 @@ export function PaymentsListPaginated({
               history.push({ search: queryString.stringify(search) });
               searchPayments(value);
             }}
+            loading={loading || searchLoading}
             enterButton
           />
         </Space>
       }
     >
       <Table
-        loading={loading}
+        loading={loading || searchLoading}
         scroll={{ x: true }}
         pagination={
           search?.search