Avoid blank page while content is being loaded

Hello community!

I have a general question regarding improving the user experience. This is not a specific problem and I can’t provide details of the website nor access to the repo, it has to remain private for now.

Question: Is there a way to avoid the blank page (I mean a rendered page with header and footer but no content) while the content is being fetched from the REST API?

More explanation: The time that Frontity takes to fetch the content from the REST API is obviously greater when working in development. I know this fetch time will depend on the server running WordPress and when the site is served in the cloud things are going to run much faster. However I am still concerned on the CLS (Cumulative Layout Shift) web vital once the site is deployed.

I want to know if there’s a way we can completely remove the CLS maybe by setting up a placeholder of the content. I know that when someone lands on the homepage and Frontity fetches the data from the REST API, it also fetches other pages that are linked in the content of the homepage. Could it be that the extra content on that homepage request be used to create a placeholder for the above the fold content once the user has clicked a link in the homepage?

I appreciate the help and please let me know if this issue was already addressed in the community. Being relatively new to Frontity and the community I sometimes don’t know how to look for things with the proper terminology.

Max

Hi @max

The time taken to fetch data is always an issue when it comes to fetching data from a REST API. This is not just a problem for Frontity but for any JS based front-end.

One tactic that you can take is populating the content area with what is known as “skeleton screens”. Rather than trying to describe it here I’ll instead refer you to a couple of articles that explain the concept far better than I could:

https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a

Hope this helps.

Hi @mburridge,

As always, thanks for your help! We’ll proceed using skeletons for our project and avoid CLS issues.

Max

1 Like