Tutorials

How to avoid content shifting using fill

When content is loaded dynamically and the environment is subject to latency, elements of a web page may shift as the content is received. You may have noticed this behavior int the previous example. To avoid such content shifting a container can fill the expected space while waiting for the content to arrive.

Setup
adk.config()
    .addContainer('my-container', adk.container.config()
        .provider('adk.hello')
        .formats([300, 300])
        .lazy()
        .fill()
        .fillBackground('#f8f8f8'))
    .apply()
    .init(publisherId)

A one second load delay has been added to the container to highlight the behavior.

Result
Scroll down