How do I make the page load completely before rendering?

[daNoot]

I have an .html web page that has both caspio datapages and regular .html 

The issue I have is that the .html language renders instantly and the caspio datapages take more time.  As a result the page load looks super choppy, with the middle portion of the page laoding before the header.  I've seen solutions in stack overflow (not caspio related) that use prerender/ prepload, but most examples use a delay timer.  I don't want to artificailly delay the page by some chosen interval, I just want the page to render once the caspio datapages are loaded, however long that is.  Anyone have a ready solution?

[Volomeister]

Hi daNoot!

Do you have access to editing HTML\CSS\JS of your webpage?
If so, the flow for implementing such a functionality is next:

1. Hide content of your page by adding "display: none;" to HTML element with the main content (that wraps embedded caspio widget as well)
2.  And add next line of JavaScript 

<script>
document.addEventListener('DataPageReady', _=> {
document.querySelector('CSS SELECTOR OF THAT HIDDEN ELEMENT').style =  "display: block;"
})
</script>

This script means that after Caspio widget loads, content on the page will be shown at once.

To make it more appealing, some custom loader can be added to the page as well.

You can also share a link to the page where the Caspio widget is deployed and I can give you more specific advice