Use a Managed Export CSV component that handles various states

src/components/ui/csvDownloader/csv-export.tsx

@@ -8,7 +8,7 @@
 import { JSX, useCallback } from 'react';
 import { CsvExportProps } from './csv-export.type';
 import { useCsvExport } from './use-csv-export';
-import { ExportCsvButton } from './export-csv-button';
+import { ManagedExportCsvButton } from './managed-export-csv-button';
 
 export function CsvExport({
     columns,
@@ -19,10 +19,12 @@ export function CsvExport({
     skipPinnedBottom = false,
     language,
     getData,
+    resetKey,
 }: CsvExportProps): JSX.Element {
     const csvExport = useCsvExport();
-    const download = useCallback(() => {
-        csvExport.getData({
+
+    const exportCsv = useCallback(async () => {
+        await csvExport.getData({
             columns,
             tableName,
             tableNamePrefix,
@@ -32,6 +34,5 @@ export function CsvExport({
             getData,
         });
     }, [columns, csvExport, tableName, tableNamePrefix, skipColumnHeaders, skipPinnedBottom, language, getData]);
-
-    return <ExportCsvButton disabled={disabled} onClick={download} />;
+    return <ManagedExportCsvButton disabled={disabled} exportCsv={exportCsv} resetKey={resetKey} />;
 }

src/components/ui/csvDownloader/csv-export.type.ts

@@ -6,6 +6,7 @@
  */
 
 import { ColDef, CsvExportParams } from 'ag-grid-community';
+import { Key } from 'react';
 import { GsLangUser } from '../../../utils';
 
 export type CsvDownloadProps = {
@@ -17,6 +18,7 @@ export type CsvDownloadProps = {
     language: GsLangUser;
     getData: (params?: CsvExportParams) => string | undefined | void;
     isCopyCsv?: boolean;
+    resetKey?: Key;
 };
 
 export type CsvExportProps = CsvDownloadProps & {

src/components/ui/csvDownloader/index.ts

@@ -8,4 +8,5 @@
 export * from './csv-export';
 export * from './csv-export.type';
 export * from './export-csv-button';
+export * from './managed-export-csv-button';
 export * from './use-csv-export';

src/components/ui/csvDownloader/managed-export-csv-button.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { ExportCsvButton } from './export-csv-button';
+
+export interface ManagedExportCsvButtonProps {
+    disabled?: boolean;
+    exportCsv: () => Promise<void>;
+    resetKey?: unknown;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+}
+
+export function ManagedExportCsvButton({
+    disabled = false,
+    exportCsv,
+    resetKey,
+    onSuccess,
+    onError,
+}: ManagedExportCsvButtonProps) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSuccessful, setIsSuccessful] = useState(false);
+
+    useEffect(() => {
+        setIsLoading(false);
+        setIsSuccessful(false);
+    }, [resetKey]);
+
+    useEffect(() => {
+        if (disabled) {
+            setIsSuccessful(false);
+        }
+    }, [disabled]);
+
+    const handleClick = useCallback(async () => {
+        setIsSuccessful(false);
+        setIsLoading(true);
+
+        try {
+            await exportCsv();
+            setIsSuccessful(true);
+            onSuccess?.();
+        } catch (error) {
+            setIsSuccessful(false);
+            onError?.(error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [exportCsv, onSuccess, onError]);
+
+    return (
+        <ExportCsvButton
+            disabled={disabled || isLoading}
+            onClick={handleClick}
+            isDownloadLoading={isLoading}
+            isDownloadSuccessful={isSuccessful}
+        />
+    );
+}