RadzenDataGrid, prevent data flicker on load

Radzen.Blazor Components
1

When you open a page with a DataGrid you typically see the following:

  1. An empty data grid opens with "No records to display" warning
  2. Split second passes
  3. The data loads in and the grid is resized and populated with data

This creates a visual 'flash' of empty grid into populated (and resized) grid. It's even more noticeable when you refresh 1 page with the grid multiple times. Is there a way to avoid rendering a grid at all before the data is fully loaded?

2

You can hide any Radzen Blazor component by settings its Visible attribute. Have in mind that if you use the LoadData event of RadzenDataGrid this won't be a solution. You can set IsLoading in such cases.

3

Could you please explain how IsLoading should be used in order to prevent the flicker? As I understand it just controls whether or not the spinner is shown, but I still get to see the empty grid for a split second.

4

If you don't want to see an empty grid you should hide it until data is available:

<RadzenDataGrid Visible="@isVisible" Data="@data" ...>

Have in mind that this won't work with LoadData as then nothing is going to trigger it.

5

This sounds impossible with IQueryable then, I can't rely on LoadData because it's not getting triggered and I can't go with "until data is available" because data in IQueryable is always available, it's just a matter of delay while it's being fetched.