Add loading when import load of invoice information

src/components/InvoiceSearch/InvoiceSearch.tsx

@@ -21,6 +21,7 @@ import { uniq } from "lodash";
 import CreateInvoiceModal from "./CreateInvoiceModal";
 import { ProjectResult } from "@/app/api/projects";
 import { IMPORT_INVOICE, IMPORT_RECEIPT } from "@/middleware";
+import InvoiceSearchLoading from "./InvoiceSearchLoading";
 
 
 
@@ -41,13 +42,17 @@ type invoiceListRow = Partial<
   }
 >;
 
+interface SubComponents {
+  Loading: typeof InvoiceSearchLoading;
+}
+
 type SearchQuery = Partial<Omit<issuedInvoiceSearchForm, "id">>;
 type SearchParamNames = keyof SearchQuery;
 
 type SearchQuery2 = Partial<Omit<receivedInvoiceSearchForm, "id">>;
 type SearchParamNames2 = keyof SearchQuery2;
 
-const InvoiceSearch: React.FC<Props> = ({ invoices, projects, abilities }) => {
+const InvoiceSearch: React.FC<Props> & SubComponents = ({ invoices, projects, abilities }) => {
   console.log(abilities)
   const { t } = useTranslation("Invoice");
 
@@ -96,18 +101,22 @@ const InvoiceSearch: React.FC<Props> = ({ invoices, projects, abilities }) => {
         return;
       }
 
+      setLoading(true)
       const formData = new FormData();
       formData.append('multipartFileList', file);
 
       const response = await importIssuedInovice(formData);
+      
       // response: status, message, projectList, emptyRowList, invoiceList
 
       if (response.status) {
         successDialog(t("Import Success"), t).then(() => {
+          setLoading(false)
           window.location.reload();
         });
       } else {
         handleImportError(response);
+        setLoading(false)
       }
     } catch (err) {
       console.log(err);
@@ -177,6 +186,7 @@ const InvoiceSearch: React.FC<Props> = ({ invoices, projects, abilities }) => {
 
       const formData = new FormData();
       formData.append('multipartFileList', file);
+      setLoading(true)
 
       const response = await importReceivedInovice(formData)
       console.log(response)
@@ -185,6 +195,7 @@ const InvoiceSearch: React.FC<Props> = ({ invoices, projects, abilities }) => {
         successDialog(t("Import Success"), t).then(() => {
           window.location.reload()
         })
+        setLoading(false)
       }else{
         if (response.emptyRowList.length >= 1){
           errorDialogWithContent(t("Import Fail"), 
@@ -220,6 +231,7 @@ const InvoiceSearch: React.FC<Props> = ({ invoices, projects, abilities }) => {
             window.location.reload()
           })
         }
+        setLoading(false)
       }
     }catch(error){
       console.log(error)
@@ -423,10 +435,14 @@ const InvoiceSearch: React.FC<Props> = ({ invoices, projects, abilities }) => {
     return importRight
   }
 
+  const [loading, setLoading] = React.useState(false);
+
   return (
     <>
-    
+      {loading && <InvoiceSearch.Loading />}
+      
       {
+        !loading &&
         isAddInvoiceRightExist() &&
         <Stack
           direction="row"
@@ -468,6 +484,7 @@ const InvoiceSearch: React.FC<Props> = ({ invoices, projects, abilities }) => {
       }
       
       {
+        !loading &&
         // tabIndex == 0 &&
         <SearchBox
           criteria={searchCriteria}
@@ -486,23 +503,31 @@ const InvoiceSearch: React.FC<Props> = ({ invoices, projects, abilities }) => {
           onReset={onReset}
         />
       }
+
+      
+      {
+        !loading &&
+        <>
+        <Divider sx={{ paddingBlockStart: 2 }} />
+        <Card sx={{ display: "block" }}>
+          <CardContent>
+          <Stack direction="row" justifyContent="space-between">
+            <Typography variant="h6">{t('Total Issued Amount (HKD)')}:</Typography>
+            <Typography variant="h6">{moneyFormatter.format(filteredIvoices.reduce((acc, current) => (acc + current.issuedAmount), 0))}</Typography>
+          </Stack>
+          <Stack direction="row" justifyContent="space-between">
+            <Typography variant="h6">{t('Total Received Amount (HKD)')}:</Typography>
+            <Typography variant="h6">{moneyFormatter.format(filteredIvoices.reduce((acc, current) => (acc + current.receivedAmount), 0))}</Typography>
+          </Stack>
+          </CardContent>
+        </Card>
+        <Divider sx={{ paddingBlockEnd: 2 }} />
+        </>
+      }
+      
       
-      <Divider sx={{ paddingBlockStart: 2 }} />
-      <Card sx={{ display: "block" }}>
-        <CardContent>
-        <Stack direction="row" justifyContent="space-between">
-          <Typography variant="h6">{t('Total Issued Amount (HKD)')}:</Typography>
-          <Typography variant="h6">{moneyFormatter.format(filteredIvoices.reduce((acc, current) => (acc + current.issuedAmount), 0))}</Typography>
-        </Stack>
-        <Stack direction="row" justifyContent="space-between">
-          <Typography variant="h6">{t('Total Received Amount (HKD)')}:</Typography>
-          <Typography variant="h6">{moneyFormatter.format(filteredIvoices.reduce((acc, current) => (acc + current.receivedAmount), 0))}</Typography>
-        </Stack>
-        </CardContent>
-      </Card>
-      <Divider sx={{ paddingBlockEnd: 2 }} />
-  
       {
+        !loading &&
         // tabIndex == 0 &&
         <SearchResults<invoiceList>
           items={filteredIvoices}
@@ -586,4 +611,6 @@ const InvoiceSearch: React.FC<Props> = ({ invoices, projects, abilities }) => {
   );
 };
 
+InvoiceSearch.Loading = InvoiceSearchLoading;
+
 export default InvoiceSearch;

src/components/InvoiceSearch/InvoiceSearchLoading.tsx

@@ -5,7 +5,7 @@ import Stack from "@mui/material/Stack";
 import React from "react";
 
 // Can make this nicer
-export const SalarySearchLoading: React.FC = () => {
+export const InvoiceSearchLoading: React.FC = () => {
   return (
     <>
       <Card>
@@ -23,7 +23,7 @@ export const SalarySearchLoading: React.FC = () => {
           </Stack>
         </CardContent>
       </Card>
-      <Card>Salary
+      <Card>
         <CardContent>
           <Stack spacing={2}>
             <Skeleton variant="rounded" height={40} />
@@ -37,4 +37,4 @@ export const SalarySearchLoading: React.FC = () => {
   );
 };
 
-export default SalarySearchLoading;
+export default InvoiceSearchLoading;