Defer external api call, show skeleton loader

Support
#1

Hi!

I have an external api looper set up that calls json data from a google sheet.

Besides setting cache time, I’d like to defer the api call on page load to get all the page elements before the call and to show a skeleton loader while data is called.

Is it possible? Could you guide me on how to do it or where to look into the docs?

Thanx

1 Like
#2

Hi @cesc,

It is not very clear what exactly you are trying to acheive here. If you want to store all the content of the page into a Google Sheet and call it through the API to load, that can be done but it requires complex custom development which is beyond the scope of Theme Support.

Thanks

#3

Oh sorry I’ll try to explain it better.

Let’s say I have an external api looper provider in a page, and the API cache time is set to never.
Every time a user visits the page the api call is triggered and nothing is shown untill the data is received.
So the browser does not show anything of this page until the API data is available.

I’d like to first load all the page elements: the header and other content in the page (or above the fold) and then call the API content. And while the call is being executed, to show a skeleton type loader until the data is available, so the user knows that something is happening. So a preloader just for the content that comes from the API.

1 Like
#4

Hi @cesc,

Yes, that is what we understood from your first comment as I said it can be done through complex custom coding, which is beyond the scope of Theme Support. I would suggest you hire a developer who can assist you in doing the customization.

Thanks

#5

Can you please create a feature request for this?

1 Like
#6

Sorry but you said

If you want to store all the content of the page into a Google Sheet and call it through the API to load

That is not what I’m trying to achieve. I just want to change the page load order so the api call is the last thing to load. Maybe through a js event listener or through a hook (x_after_the_content_end) could be possible? I can’t find nothing in the docs about the loading sequence.

At least if you could tell us something about it we can further try to investigate or develop something to achieve it.

Then the loader is html and css.

#7

Hi @cesc,

Unfortunately, that is not possible with the hooks. You can try using jQuery or JavaScript on the page load or document ready event.

Hope it helps.
Thanks

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.