IO-2261 Add Loading effect

client/src/pages/bills/bills.page.component.jsx

@@ -32,6 +32,7 @@ export function BillsListPage({
 }) {
   const search = queryString.parse(useLocation().search);
   const [openSearchResults, setOpenSearchResults] = useState([]);
+  const [searchLoading, setSearchLoading] = useState(false);
   const { page } = search;
   const history = useHistory();
   const [state, setState] = useState({
@@ -207,7 +208,6 @@ export function BillsListPage({
 
   useEffect(() => {
     if (search.search && search.search.trim() !== "") {
-      //  setLoading(true);
       searchBills();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -215,6 +215,7 @@ export function BillsListPage({
 
   async function searchBills(value) {
     try {
+      setSearchLoading(true);
       const searchData = await axios.post("/search", {
         search: value || search.search,
         index: "bills",
@@ -223,7 +224,7 @@ export function BillsListPage({
     } catch (error) {
       console.log("Error while fetching search results", error);
     } finally {
-      // setLoading(false);
+      setSearchLoading(false);
     }
   }
 
@@ -268,6 +269,7 @@ export function BillsListPage({
               history.push({ search: queryString.stringify(search) });
               searchBills(value);
             }}
+            loading={loading || searchLoading}
             enterButton
           />
         </Space>
@@ -276,7 +278,7 @@ export function BillsListPage({
       <PartsOrderModalContainer />
 
       <Table
-        loading={loading}
+        loading={loading || searchLoading}
         // scroll={{
         //   x: "50%", // y: "40rem"
         // }}