feat: improve UI experience of resource priting

packages/webapp/src/hooks/query/FinancialReports/use-export-pdf.ts

@@ -3,6 +3,7 @@ import { downloadFile } from '@/hooks/useDownloadFile';
 import useApiRequest from '@/hooks/useRequest';
 import { AxiosError } from 'axios';
 import { useMutation } from 'react-query';
+import { asyncToastProgress } from '@/utils/async-toast-progress';
 
 interface ResourceExportValues {
   resource: string;
@@ -13,12 +14,13 @@ interface ResourceExportValues {
  * @param {Object} args - Additional configurations for the download.
  * @returns {Function} A function to trigger the file download.
  */
-export const useResourceExportPdf = () => {
+export const useResourceExportPdf = (props) => {
   const apiRequest = useApiRequest();
 
   return useMutation<void, AxiosError, any>((data: ResourceExportValues) => {
-    return apiRequest
-      .get('/export', {
+    return apiRequest.get(
+      '/export',
+      {
         responseType: 'blob',
         headers: {
           accept: 'application/pdf',
@@ -27,10 +29,34 @@ export const useResourceExportPdf = () => {
           resource: data.resource,
           format: data.format,
         },
-      })
-      .then((res) => {
-        downloadFile(res.data, `${data.resource}.pdf`);
-        return res;
-      });
+      },
+      props,
+    );
   });
 };
+
+export const useDownloadExportPdf = () => {
+  const { startProgress, stopProgress } = asyncToastProgress();
+
+  const resourceExportPdfMutation = useResourceExportPdf({
+    onMutate: () => {},
+  });
+  const { mutateAsync, isLoading: isExportPdfLoading } =
+    resourceExportPdfMutation;
+
+  const downloadAsync = (values) => {
+    if (!isExportPdfLoading) {
+      startProgress();
+      return mutateAsync(values).then((res) => {
+        downloadFile(res.data, `${values.resource}.pdf`);
+        stopProgress();
+
+        return res;
+      });
+    }
+  };
+  return {
+    ...resourceExportPdfMutation,
+    downloadAsync,
+  };
+};