IO-2261 Add Loading effect

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -23,6 +23,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
   const search = queryString.parse(useLocation().search);
   const [openSearchResults, setOpenSearchResults] = useState([]);
+  const [searchLoading, setSearchLoading] = useState(false);
   const { page, sortcolumn, sortorder } = search;
   const history = useHistory();
 
@@ -197,7 +198,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
 
   useEffect(() => {
     if (search.search && search.search.trim() !== "") {
-      //  setLoading(true);
       searchJobs();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -205,6 +205,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
 
   async function searchJobs(value) {
     try {
+      setSearchLoading(true);
       const searchData = await axios.post("/search", {
         search: value || search.search,
         index: "jobs",
@@ -213,7 +214,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
     } catch (error) {
       console.log("Error while fetching search results", error);
     } finally {
-      // setLoading(false);
+      setSearchLoading(false);
     }
   }
 
@@ -246,13 +247,14 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
               history.push({ search: queryString.stringify(search) });
               searchJobs(value);
             }}
+            loading={loading || searchLoading}
             enterButton
           />
         </Space>
       }
     >
       <Table
-        loading={loading}
+        loading={loading || searchLoading}
         pagination={
           search?.search
             ? { pageSize: 25 }

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

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"
         // }}