add loading when downloading

src/components/GenerateProjectPandLReport/GenerateProjectPandLReport.tsx

@@ -12,15 +12,22 @@ import { FormHelperText } from "@mui/material";
 import { errorDialog, errorDialogWithContent } from "../Swal/CustomAlerts";
 import { TeamResult } from "@/app/api/team";
 import { SessionStaff } from "@/config/authConfig";
+import GenerateProjectPandLReportLoading from "./GenerateProjectPandLReportLoading";
 
 interface Props {
     projects: ProjectResult[];
 }
 
+interface SubComponents {
+    Loading: typeof GenerateProjectPandLReportLoading;
+}
+
+
+
 type SearchQuery = Partial<Omit<ProjectPandLReportFilter, "id">>;
 type SearchParamNames = keyof SearchQuery;
 
-const GenerateProjectPandLReport: React.FC<Props> = ({ projects }) => {
+const GenerateProjectPandLReport: React.FC<Props> & SubComponents = ({ projects }) => {
     const { t } = useTranslation("report");
     const projectCombo = projects.map(project => ({
         label: `${project.code} - ${project.name}`,
@@ -36,15 +43,17 @@ const GenerateProjectPandLReport: React.FC<Props> = ({ projects }) => {
         [t],
     );
 
+    const [loading, setLoading] = React.useState(false);
+
     return (
         <>
-            <SearchBox
+            {loading && <GenerateProjectPandLReport.Loading />}
+            {!loading &&
+                <SearchBox
                 criteria={searchCriteria}
                 onSearch={async (query) => {
-
+                    setLoading(true);
                     if (Boolean(query.project) && query.project !== "All") {
-                        // const projectIndex = projectCombo.findIndex(project => project === query.project)
-                        // console.log(projects[projectIndex].id, query.startMonth, query.startMonthTo)
                         if(query.project != null && query.startMonth != ""  && query.startMonthTo != undefined){
                             const response = await fetchProjectPandLReport({ projectId: parseFloat(query.project), startMonth: query.startMonth, endMonth: query.startMonthTo })
                             if (response) {
@@ -58,11 +67,14 @@ const GenerateProjectPandLReport: React.FC<Props> = ({ projects }) => {
                             })
                         }   
                     }
+                    setLoading(false);
                 }}
                 formType={"download"}
-            />
+            />}
         </>
     );
 };
 
+GenerateProjectPandLReport.Loading = GenerateProjectPandLReportLoading;
+
 export default GenerateProjectPandLReport;