table: empty-state and loading-distractor should not be shown at the same time

[christian-fischer]

Feature Request

Summary

Both empty-state and loading-distractor are visible in the table at the same time.
This is confusing as usually the empty state does not apply while still loading.

Feature Description

If we defined an empty-state and a loading-distractor for our table, and the table is loading,
the empty state is visible underneath the loading-distractor.

• This is confusing, as the empty-state usually has a call to action (change filter, timeframe, or something of the sort) - which does not apply while still loading (the user just has to wait until the load finishes to see data).
• Therefore it makes sense to not show the empty-state while the table is still in loading state.

see https://stackblitz.com/edit/github-dxktnh for a small example demonstrating the current behavior

Attachments

[tomheller]

Hi @christian-fischer and thank you for the request.
This would be a good addition to the table. Would you be willing to contribute this feature? I would assume a *ngIf directive on an ng-container for the empty state should do the trick.

barista/libs/barista-components/table/src/table.html

Lines 6 to 10 in 9963c82

	<ng-template #emptyStateTemplate>
	<ng-content
	select="[dtTableEmptyState], dt-empty-state, [dtCustomEmptyState]"
	></ng-content>
	</ng-template>

Otherwise we would need to check in the setter of the loading state, if we need to show the empty state as well, which could be a little bit tricky in terms of handling the correct state.

barista/libs/barista-components/table/src/table.ts

Lines 99 to 105 in 9963c82

	@Input()
	get loading(): boolean {
	return this._loading;
	}
	set loading(value: boolean) {
	this._loading = coerceBooleanProperty(value);
	}

[christian-fischer]

@tomheller yes, that looks simple and straightforward enough for me ;)
Thanks for pointing me in the right direction - I'll prepare a PR for that....

[christian-fischer]

I think in part this also relates to #287

[ffriedl89]

Moved