Start download while data is still being fetched from API calls

[gpadbidri]

I want to download CSV considering the following scenario :

1. Run the API Call to fetch data from an API call for the number of pages. Meaning if I have 10 pages with pageSize (number of records per page) = 50 -> So I invoke the API 10 times. But I also want the download to start immideately after the first api call, that way I dont load the browser and user sees some progress that download hass started. For consecutive downloads I would add the response to the data object. Is it possibe withr react-csv ?

I need while the data is not yet pulled completely; I want to start downloading

[davidfrisch]

Hey, while waiting for a fix, here's a workaround.

import "./styles.css";
import { useEffect, useRef, useState } from "react";
import { CSVLink } from "react-csv";
import MyService from "../../services/MyService";
import FileDownloadIcon from "@mui/icons-material/FileDownload";
import { LoadingButton } from "@mui/lab";

type Props = {
   id:number
};

export function ButtonToCSV({
   id
}: Props) {
  const [csvData, setCsvData] = useState<any>([]);
  const [isLoading, setIsLoading] = useState(false);
  const csvLinkEl = useRef<any>(null);

  const handleDownload = async (event) => {
    if (!isLoading) {
      setIsLoading(true);
      try {
        const data = await MyService.getCSV(id);
        setCsvData(data);
        setIsLoading(false);
      } catch (error) {
        console.log(error);
        setIsLoading(false);
      }
    }
  };

  useEffect(() => {
    if (csvData.length > 0 && csvLinkEl.current && !isLoading) {
      csvLinkEl.current.link.click();
    }
  }, [csvData]);

  return (
    <div>
      <LoadingButton
        loading={isLoading}
        loadingPosition="start"
        startIcon={<FileDownloadIcon />}
        variant="outlined"
        color="primary"
        className="button-export-csv-container"
        onClick={handleDownload}
      >
        Export
      </LoadingButton>
      <CSVLink
        asyncOnClick={true}
        style={{ color: "#000" }}
        data={csvData}
        ref={csvLinkEl}
      ></CSVLink>
    </div>
  );
}