Disabling and enabling resource route link | Remix | Page 1

vernal mesa Oct 5, 2022, 4:04 AM

#

Hi,
Is there a way to disable a Resource route link while the resource is being generated and enabling it after that?

I have a PDF report that gets generated as soon as the user clicks on a Link. So I'm using a resource route that returns the PDF as a ReadableStream with a content-Disposition of attachment.

Here's a a code fragment example:

export const loader: LoaderFunction = async ({ params }) => {
  invariant(params.recordID, "Event Id is required!");
  let recordID = params.recordID;

  let reportsService = createReportsService();
  let reportFileStream = await reportsService.getReport(
    recordID
  );

  return new Response(reportFileStream, {
    headers: {
      "Content-disposition": `attachment; filename=report.pdf`,
      "Content-Type": "application/pdf",
    },
  });
};

I'm using the Link to the resource route this way:

<Link to={reportUrl} reloadDocument >
  Get the Report
</Link>

I want the Link to get disabled as soon as the user clicks on it and then re enable it after the report is ready and the user has saved it (or discarded the "save" window).

I can't use useTransition hook because reloadDocument disables javascript behavior but I can't find out another way to disable and enable the link.
I can only disable it as soon as the user clicks on it (with a conditional pointer-events style controlled by useState) but I haven't found a way to detect when the report has been generated and the user has saved it (or discarded the "save" window) so I can re enable the link again.

So any help or hint to find a solution is very much appreciated!

simple radish Oct 5, 2022, 4:28 AM

#

I’m not sure I understand. With link to the resource router and reloadDocument is the browser navigating the window to the pdf? If so, the remix app is no longer present, right? Or are you doing a target=_blank to open the pdf in a new tab/window that you want to watch to know to re-enable the link?

vernal mesa Oct 5, 2022, 4:32 AM

#

I'm using content-disposition attachment. The app is always present (in the path in which the link was clicked) while the resource is getting generated.
After the PDF gets generated the "save" window appears. Then I can save or discard the window and the page from which the link was clicked is always present.

simple radish Oct 8, 2022, 4:26 PM

#

Ok, I think I see. This is similar to the browser’s print dialog, right? If so, I’m not sure if there are any events available to listen for. Although hacky, if your internet is to prevent accidental double clicks, you could disable for a brief timeout. Not the ideal, but could be a “good enough” fallback

fierce moth Oct 11, 2022, 5:09 PM

#

I imagine you could disable the link the user clicked to call the resource route, but I don't think you could prevent the user from calling the same route multiple times. I would add a status to your report record and check to see if it's processing and if so, just return. Then updated to completed once the PDF is generated.

simple radish Oct 14, 2022, 2:49 AM

#

Even better. No matter what happens on the client, the server knows what it’s doing

#Disabling and enabling resource route link