Improve the Virtualization docs to clarify that placeholder content must be the same size as item content

[Alerinos]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I used this example from the documentation:
https://learn.microsoft.com/pl-pl/aspnet/core/blazor/components/virtualization?view=aspnetcore-7.0

private async ValueTask<ItemsProviderResult<Employee>> LoadEmployees(
    ItemsProviderRequest request)
{
    var numEmployees = Math.Min(request.Count, totalEmployees - request.StartIndex);
    var employees = await EmployeesService.GetEmployeesAsync(request.StartIndex, 
        numEmployees, request.CancellationToken);

    return new ItemsProviderResult<Employee>(employees, totalEmployees);
}

My code looks like this:

    private async ValueTask<ItemsProviderResult<DTO.Article>> LoadEmployees(ItemsProviderRequest request)
    {
// Count = 336
        var count = await _search._context.Article.CountAsync(x => x.Status == Models.Article.StatusType.Show);
        var numEmployees = Math.Min(request.Count, count - request.StartIndex);
        
        var dto2 = await _search._context.Article
            .Include(x => x.Details)
            .Include(x => x.Names)
            .Include(x => x.Images)
            .Where(x => x.Status == Models.Article.StatusType.Show)
            .OrderByDescending(x => x.Details.Created)
            .Skip(request.StartIndex)
            .Take(numEmployees)
            .ToListAsync();

        var dto3 = dto2.Select(x => new DTO.Article
        {
            Name = x.Names.OrderByDescending(x => x.Created).Select(x => x.Name).FirstOrDefault() ?? string.Empty,
            Title = x.Details.Title,
            Description = x.Details.Description,
            Created = x.Details.Created,
            Tags = x.HashTags.Select(x => x.Tag).Take(3).ToList(),
            ImageHead = x.Images.LastOrDefault(x => x.Type == Image.StatusType.Header).Url ?? string.Empty,
        }).ToList();
        
// dto3 = 35 object
// count = 336 int
        return new ItemsProviderResult<DTO.Article>(dto3, count);
    }

My model:

internal class Article
{
    public Guid Id { get; set; }
    public string Status { get; set; } = string.Empty;
    public string Culture { get; set; } = string.Empty;
    public List<string> Cultures { get; set; } = null!;
    public string Name { get; set; } = string.Empty;
    public string Title { get; set; } = string.Empty;
    public string Content { get; set; } = string.Empty;
    public string Description { get; set; } = string.Empty;
    public bool Nsfw { get; set; } = false;
    public bool Sponsor { get; set; } = false;
    public bool Logged { get; set; } = false;
    public bool Premium { get; set; } = false;
    public decimal ReadingTime { get; set; }
    public DateTime Created { get; set; } = DateTime.UtcNow;
    public DateTime Updated { get; set; } = DateTime.UtcNow;
    public List<string> Tags { get; set; } = new();
    public string ImageHead { get; set; } = string.Empty;
    public List<Article> Articles { get; set; } = null!;
}

Razor:

<Row Class="gap-y-[1rem] gap-x-[1%]">

    <Virtualize Context="article" ItemsProvider="@LoadEmployees">
        <ItemContent>
            <Column Class="basis-full">
                <Card Title="@article.Title" Link="@($"Article/{article.Name}")" Hover=true>
                    <CardPicture Url="@article.ImageHead" Class="h-[15rem] xl:h-[20rem]" Sizes=@(new List<CardPicture.Size>{ new () { Width = 512, Height = 288 }})/>
                    <CardTitle Class="text-left text-xl"/>
                    <CardContent>
                        <HashTag Tag="@article.Tags" Class="inline"/>
                    <p class="inline text-md text-date dark:text-date_dark float-right">@article.Created.ToString("dd/MM/yy")</p>
                    </CardContent>   
                </Card>
            </Column>
        </ItemContent>
        <Placeholder>
            <Card>
                <CardTitle Title="Loading..."/>
                <CardContent>
                    In progres...
                </CardContent>
            </Card>
        </Placeholder>
    </Virtualize>

</Row>

The first results are correct. The problem starts with scrolling.

First loading, its ok:

1 break point scrool:

The next one is right away, I don't have to do anything.

Scrolls on, 2 break point scroll:

Scrolls on, 3 brak point scroll:

Still ok, now takes the breakpoint off.

[02:07:20 ERR] An exception occurred while iterating over the results of a query for context type 'Stand.Plugins.Articles.Context'.
System.InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
   at Microsoft.EntityFrameworkCore.Infrastructure.Internal.ConcurrencyDetector.EnterCriticalSection()
   at Microsoft.EntityFrameworkCore.Query.Internal.SingleQueryingEnumerable`1.AsyncEnumerator.MoveNextAsync()
System.InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
   at Microsoft.EntityFrameworkCore.Infrastructure.Internal.ConcurrencyDetector.EnterCriticalSection()
   at Microsoft.EntityFrameworkCore.Query.Internal.SingleQueryingEnumerable`1.AsyncEnumerator.MoveNextAsync()
[02:07:20 WRN] Unhandled exception rendering component: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
System.InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
   at Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize`1.BuildRenderTree(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
[02:07:20 ERR] Unhandled exception in circuit '7S3gOiTMV1OjU6v35dYZcg1i2Sb-MZExeXvGsHDWF2Q'.
System.InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
   at Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize`1.BuildRenderTree(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

It turns out that everything is happening fast ...
I'm sitting for this half day today. I do not understand what's going on...
There is a documentation error or I don't understand how to do this.
Can I ask for help?

Expected Behavior

No response

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

.net 7 core rc1

Anything else?

No response

[javiercn]

@Alerinos thanks for contacting us.

When you are scrolling fast, LoadEmployees is being called multiple times without the calls being properly serialized, which is causing multiple EF queries to be sent in parallel to the database (hence your error).

You have a cancellation token in the ItemsProviderRequest that you can flow to stop the ongoing queries before starting a new one to avoid sending multiple queries in parallel.

[Alerinos]

@javiercn
Scrolling slowly also causes a problem. I used something like that but it doesn't work:

      var count = await _search._context.Article.AsNoTracking().Where(x => x.Status == Models.Article.StatusType.Show).CountAsync(request.CancellationToken);  <--- here
        var numEmployees = Math.Min(request.Count, count - request.StartIndex);
        
        var dto2 = await _search._context.Article
            .AsNoTracking()
            .Include(x => x.Details)
            .Include(x => x.Names)
            .Include(x => x.Images)
            .Where(x => x.Status == Models.Article.StatusType.Show)
            .OrderByDescending(x => x.Details.Created)
            .Skip(request.StartIndex)
            .Take(request.Count)
            .ToListAsync(request.CancellationToken); <--- here

Are you able to see how it should be done? I think it is also worth updating the documentation, there may be many people like me.

Edit: The same error
System.NullReferenceException: „Object reference not set to an instance of an object.”

[11:12:44 ERR] An exception occurred while iterating over the results of a query for context type 'Stand.Plugins.Articles.Context'.
System.InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
   at Microsoft.EntityFrameworkCore.Infrastructure.Internal.ConcurrencyDetector.EnterCriticalSection()
   at Microsoft.EntityFrameworkCore.Query.Internal.SingleQueryingEnumerable`1.AsyncEnumerator.MoveNextAsync()
System.InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
   at Microsoft.EntityFrameworkCore.Infrastructure.Internal.ConcurrencyDetector.EnterCriticalSection()
   at Microsoft.EntityFrameworkCore.Query.Internal.SingleQueryingEnumerable`1.AsyncEnumerator.MoveNextAsync()
[11:12:44 WRN] Unhandled exception rendering component: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
System.InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
   at Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize`1.BuildRenderTree(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
[11:12:44 ERR] Unhandled exception in circuit 'o1s8tybE1NTMJdx1xMJHuxxRCjkFr8vVvLo6YW9dGK4'.
System.InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
   at Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize`1.BuildRenderTree(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
[11:12:44 INF] Executed endpoint '/_blazor'

[javiercn]

@Alerinos thanks for the additional details.

We already have documentation covering this. You can check it here. The suggestion would be to instantiate a new DbContext per operation as described in the article.

I am not 100% sure why passing the cancellation token approach did not work. That would be a question for the EF folks.

[Alerinos]

I found a similar problem.
dotnet/efcore#26884
Unfortunately, nothing is explained in it, also marking it as a duplicate does not say anything.

@javiercn
https://gyazo.com/ad72b054b5605326dd15a83cb2cf6df2
or:
https://user-images.githubusercontent.com/42449535/194839172-438966e8-d905-4199-908b-fb24353c65f0.mp4

I think it is also Blazor's fault, see for yourself that instead of loading a new element once, it refreshes it many times until the exception.

my code:

    bool IsRun = false;

    private async ValueTask<ItemsProviderResult<DTO.Article>> LoadEmployees(ItemsProviderRequest request)
    {
        if (IsRun is true)
            await Task.Delay(TimeSpan.FromSeconds(1));

        IsRun = true;

...

        IsRun = false;

        return new ItemsProviderResult<DTO.Article>(dto3, count);

Edit:
This happens with OverscanCount="1"
In the case of the default "3", the number of flashes is 3 times greater.

[javiercn]

@Alerinos to be more concrete, use a DbContextFactory to create a new DbContext inside LoadEmployees. I thought the documentation above mentioned that (One context per operation).

[Alerinos]

In the case of Cancel Token:

[12:27:12 ERR] An error occurred using the connection to database 'Stand' on server '(localdb)\mssqllocaldb'.
[12:27:12 WRN] Unhandled exception rendering component: A task was canceled.
System.Threading.Tasks.TaskCanceledException: A task was canceled.
   at Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize`1.BuildRenderTree(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
[12:27:12 ERR] Unhandled exception in circuit '-hj7HmI-Jd_Mt8oxwAQwPL_s3B8LSC4EDqUgaZb06xI'.
System.Threading.Tasks.TaskCanceledException: A task was canceled.
   at Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize`1.BuildRenderTree(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

Without:
https://user-images.githubusercontent.com/42449535/194846863-ffa547a3-b8e6-41a1-b97b-693d82127f1a.mp4

    [Inject] IDbContextFactory<Context> DbFactory { get; set; } = null!;

    private async ValueTask<ItemsProviderResult<DTO.Article>> LoadEmployees(ItemsProviderRequest request)
    {
        using var context = DbFactory.CreateDbContext();
        
        var count = await context.Article.AsNoTracking().Where(x => x.Status == Models.Article.StatusType.Show).CountAsync(); // request.CancellationToken
        var numEmployees = Math.Min(request.Count, count - request.StartIndex);
        
        var dto2 = await context.Article
            .AsNoTracking()
            .Include(x => x.Details)
            .Include(x => x.Names)
            .Include(x => x.Images)
            .Where(x => x.Status == Models.Article.StatusType.Show)
            .OrderByDescending(x => x.Details.Created)
            .Skip(request.StartIndex)
            .Take(request.Count)
            .ToListAsync(); // request.CancellationToken

@javiercn I understand that this is correct behavior and is it supposed to be?

[javiercn]

@Alerinos it is not obvious what is going on in your app.

Could you provide a minimal repro project so that we can try and determine if there is an issue here?

At this point I do not think I have the expertise in this area to be accurate, so someone more familiar with the code will help here.

Hi @Alerinos. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[Alerinos]

@javiercn
Virtualize-bug.zip
Just run, the database will create itself.

edit:
Sometimes it works, sometimes it doesn't.
Often the video below shows:
https://gyazo.com/9fd18aa68464bebe9ff1292889bbce8e