isLoading component waiting on API request to finish?

Design
1

I’m trying to let the user know that the request is still waiting to be completed. I’m requesting data from an API like this:

<object data="http://pdf.maintenanceprogram.com/program_registers?dealer_id={{dealer.id}}&user_id={{user.id}}&contractf_ids={{selectedContracts}}&token={{token}}#view=FitH"></object>

However, this could take a while to load. I want to somehow let the user know that it’s still loading until the request is completed.

This is similar to what I want to do:

{{#if isLoading}}
  {{partial "partials/loading"}}
{{else}}
  <div class="pdf-iframe">
      <object data="http://pdf.maintenanceprogram.com/program_registers?dealer_id={{dealer.id}}&user_id={{user.id}}&contractf_ids={{selectedContracts}}&token={{token}}#view=FitH"></object>
  </div>
{{/if}}

Does anybody have any idea on how I would do this?? Thank you!

2

<object onload={{action "hideLoadingScreen"}}

You should be able to use the onload event to invoke an action. Although I haven’t tried it with the object tag yet.

Let me know if this helps!

Ben

3

Ah thank you! :slight_smile: I will definitely give this a shot!

4

@hschillig this is not exactly the same, but you could probably adapt some of the ideas in this article to what you’re trying to do.