Showing a loading screen while generating a PDF

This article discusses creating PDFs in Bubble applications (using the 'Create PDF' plugin action). If you wish to create PDFs based on a template you have designed in our template editor, please see other sections of the documentation.

It can take some time between when a user starts the PDF generation process and when they actually download the PDF in their browser.


Given we recommend using the 'Create PDF' action in a backend workflow, it can appear to the user as though nothing is actually happening while DocuPotion is creating the PDF and sending it back to Bubble:

To avoid this poor UX, we recommend adding a loading screen to the page that you're generating a PDF from.


This can be implemented in a number of ways, but one of the most straightforward is to add a floating group that acts as an overlay and give it a color:

You can also add a text element and a loading spinner to the center of the floating group:


Then, take the following steps:

  • Ensure the floating group (which we've called 'PDFLoading Screen' in the above example) is not visible on page load
  • When the user triggers a PDF (typically by clicking a button) show the loading screen

  • Once the PDF has been created and is ready to download, you can then hide the loading screen:

This is how the result looks:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.