Asymmetrik/ngx-starter

@if (dataSource().loading) {
    <asy-skeleton-rows [rows]="dataSource().pageChangeEvent$.value.pageSize" />
} @else if (dataSource().pagingResults$.value.elements.length === 0) {
    <div class="d-flex justify-content-center py-5">
        @if (dataSource().isFiltered) {
            @if (showIcons()) {
                <img
                    ngSrc="/assets/images/empty-state/no-results.png"
                    height="237"
                    width="257"
                    alt="No Results"
                />
            }
            <div class="d-flex flex-column align-items-start">
                <h3>{{ filteredText() }}</h3>
                @if (showClearFilters()) {
                    <button
                        class="btn btn-primary px-4 mt-2"
                        type="button"
                        (click)="clearFilters.emit()"
                    >
                        Reset Filters
                    </button>
                }
            </div>
        } @else {
            @if (showIcons()) {
                <img
                    ngSrc="/assets/images/empty-state/no-data.png"
                    height="220"
                    width="219"
                    alt="No Results"
                />
            }
            <div class="d-flex flex-column align-items-start">
                <h3>{{ emptyText() }}</h3>
            </div>
        }
    </div>
}