demo.component.html
<div class="position-relative">
    <div>
        <!-- content that is not immediately available -->
    </div>

    <ftui-loader [show]="indexPending$|async"></ftui-loader>
</div>
As a result of how CSS' algorithm works, the loader will fill the area of the nearest positioned element (any position value other than the default static). The snippet uses a div with a Boostrap utility class to ensure that the loader will overlay the relevant content.