boostrap container minimal height before async content is retrieve

Question

I develop one page web aplication using angular5 and i am using bootstrap4 for the page layout.

With a clasic layout - header - body - footer.

I have a problem when retrieving dynamic data (images) to a gallery into the body container. When user is redirected to the gallery page, an async request is dispatched to the database. Meanwhile the body container is empty so it has zero height and user can see header right above the footer.

What is best practice to setup minimal height for the container with the async content?

Answer 1

It might be a good idea to add a loading class to the wrapping div.

The HTML:

<div id="image-wrapper" class="loading">
</div>

The CSS:

.loading {
    min-height:500px;
    background-image:url('img/loading-indicator.gif');
    background-position:center;
    background-repeat:no-repeat;
}

Then you can add a callback to your async loading which adds the loaded content, and removes the loading class.