Show shimmering "skeleton" blocks while content is loading. Wrap loading regions in <bs-placeholder> and mark each field with the data-placeholder-field attribute; [loading] toggles the skeleton and marks the region aria-busy. When loading ends, loadedText is announced once.
<bs-placeholder [loading]="isLoading">
<h5 class="card-title">
<span data-placeholder-field class="d-block">Featured</span>
</h5>
<p class="card-text">
<span data-placeholder-field [xxs]="7" class="d-inline-block">
{{ isLoading ? ' ' : 'Hello world' }}
</span>
</p>
</bs-placeholder>
import { Component } from '@angular/core';
import { BsPlaceholderComponent } from '@mintplayer/ng-bootstrap/placeholder';
@Component({
selector: 'my-placeholder-demo',
templateUrl: './my-placeholder-demo.component.html',
imports: [BsPlaceholderComponent],
})
export class MyPlaceholderDemoComponent {
protected isLoading = true;
}