Add Loading when waiting for report download

src/components/CostAndExpenseReport/CostAndExpenseReport.tsx

@@ -2,12 +2,13 @@
 import { CostAndExpenseReportFilter, CostAndExpenseReportRequest } from "@/app/api/reports";
 import { useTranslation } from "react-i18next";
 import SearchBox, { Criterion } from "../SearchBox";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { TeamResult } from "@/app/api/team";
 import { Customer } from "@/app/api/customer";
 import { Subsidiary } from "@/app/api/subsidiary";
 import { fetchCostAndExpenseReport } from "@/app/api/reports/actions";
 import { downloadFile } from "@/app/utils/commonUtil";
+import CostAndExpenseReportLoading from "./CostAndExpenseReportLoading";
 
 interface Props {
   team: TeamResult[];
@@ -16,10 +17,14 @@ interface Props {
   needAll: boolean | undefined;
 }
 
+interface SubComponents {
+  Loading: typeof CostAndExpenseReportLoading;
+}
+
 type SearchQuery = Partial<Omit<CostAndExpenseReportFilter, "id">>;
 type SearchParamNames = keyof SearchQuery;
 
-const CostAndExpenseReport: React.FC<Props> = ({ team, customer, subsidiary, needAll }) => {
+const CostAndExpenseReport: React.FC<Props> & SubComponents = ({ team, customer, subsidiary, needAll }) => {
   const { t } = useTranslation("report");
   const teamCombo = team.map((t) => `${t.code} - ${t.name}`);
   // const custCombo = customer.map(c => ({label: `${c.name} - ${c.code}`, value: c.id}))
@@ -62,12 +67,17 @@ const CostAndExpenseReport: React.FC<Props> = ({ team, customer, subsidiary, nee
     [t]
   );
 
+  const [loading, setLoading] = useState(false);
+
   return (
     <>
+    {loading && <CostAndExpenseReport.Loading />}
+    {!loading &&
       <SearchBox
         formType={"download"}
         criteria={searchCriteria}
         onSearch={async (query: any) => {
+          setLoading(true);
             let index = 0
             let postData: CostAndExpenseReportRequest = {
                 teamId: null,
@@ -95,10 +105,13 @@ const CostAndExpenseReport: React.FC<Props> = ({ team, customer, subsidiary, nee
             if (response) {
                 downloadFile(new Uint8Array(response.blobValue), response.filename!!)
             }
+            setLoading(false);
         }}
-      />
+      />}
     </>
   );
 };
 
+CostAndExpenseReport.Loading = CostAndExpenseReportLoading
+
 export default CostAndExpenseReport;

src/components/Report/CostandExpenseReportGen/CostandExpenseReportGen.tsx

@@ -4,14 +4,20 @@ import React, { useMemo, useState } from "react";
 import SearchBox, { Criterion } from "../ReportSearchBox4";
 import { useTranslation } from "react-i18next";
 import { CostandExpense } from "@/app/api/report4";
+import { CostandExpenseReportGenLoading } from "./CostandExpenseReportGenLoading"
 
 interface Props {
   projects: CostandExpense[];
 }
+
+interface SubComponents{
+  Loading: typeof CostandExpenseReportGenLoading
+}
+
 type SearchQuery = Partial<Omit<CostandExpense, "id">>;
 type SearchParamNames = keyof SearchQuery;
 
-const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
+const CostandExpenseReportGen: React.FC<Props> & SubComponents = ({ projects }) => {
   const { t } = useTranslation("projects");
 
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
@@ -29,17 +35,24 @@ const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
     [t],
   );
 
+  const [loading, setLoading] = React.useState(false);
+
   return (
     <>
+    {loading && <CostandExpenseReportGen.Loading />}
+    {!loading &&
       <SearchBox
         criteria={searchCriteria}
         onSearch={(query) => {
-          console.log(query);
+          setLoading(true)
+          // console.log(query);
         }}
-      />
+      />}
       {/* <DownloadReportButton /> */}
     </>
   );
 };
 
-export default ProgressByClientSearch;
+CostandExpenseReportGen.Loading = CostandExpenseReportGenLoading
+
+export default CostandExpenseReportGen;

src/components/Report/CostandExpenseReportGen/CostandExpenseReportGenLoading.tsx

@@ -6,7 +6,7 @@ import Stack from "@mui/material/Stack";
 import React from "react";
 
 // Can make this nicer
-export const DelayReportGenLoading: React.FC = () => {
+export const CostandExpenseReportGenLoading: React.FC = () => {
   return (
     <>
       <Card>
@@ -38,4 +38,4 @@ export const DelayReportGenLoading: React.FC = () => {
   );
 };
 
-export default DelayReportGenLoading;
+export default CostandExpenseReportGenLoading;

src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx

@@ -10,16 +10,23 @@ import { fetchAllClientSubsidiaryProjects } from "@/app/api/clientprojects/actio
 import { fetchProjectsFinancialStatusReport } from "@/app/api/reporte1/action";
 import { downloadFile } from "@/app/utils/commonUtil";
 import { SessionStaff } from "@/config/authConfig";
+import FinancialStatusReportGenLoading from "./FinancialStatusReportGenLoading";
 //import { DownloadReportButton } from './DownloadReportButton';
 interface Props {
   projects: FinancialStatus[];
   teamCombo : TeamCombo[];
   userStaff: SessionStaff;
 }
+
+
+interface SubComponents {
+  Loading: typeof FinancialStatusReportGenLoading;
+}
+
 type SearchQuery = Partial<Omit<TeamCombo, "id">>;
 type SearchParamNames = keyof SearchQuery;
 
-const GenFinancialStatusReport: React.FC<Props> = ({ projects, teamCombo, userStaff }) => {
+const GenFinancialStatusReport: React.FC<Props> & SubComponents = ({ projects, teamCombo, userStaff }) => {
   const { t } = useTranslation("projects");
 
   const combo = teamCombo.map(combo => {return `${combo.code} - ${combo.name}`})
@@ -37,11 +44,16 @@ const GenFinancialStatusReport: React.FC<Props> = ({ projects, teamCombo, userSt
     [t],
   );
 
+  const [loading, setLoading] = useState(false);
+
   return (
     <>
+      {loading && <GenFinancialStatusReport.Loading />}
+      {!loading &&
       <SearchBox
         criteria={searchCriteria}
         onSearch={async (query) => {
+          setLoading(true)
           if (query.code.length > 0 && query.code.toLocaleLowerCase() !== "all") {
             const projectIndex = teamCombo.findIndex((project) => `${project.code} - ${project.name}` === query.code)
             console.log(teamCombo[projectIndex].id)
@@ -56,12 +68,15 @@ const GenFinancialStatusReport: React.FC<Props> = ({ projects, teamCombo, userSt
                 downloadFile(new Uint8Array(response.blobValue), response.filename!!)
             }
           } 
+          setLoading(false)
         }}
         formType="download"
-      />
+      />}
       {/* <DownloadReportButton /> */}
     </>
   );
 };
 
+GenFinancialStatusReport.Loading = FinancialStatusReportGenLoading
+
 export default GenFinancialStatusReport;