MAUI Blazor Virtualize with Images does not render properly

[ipax77]

Description

When using a virtualize component in MAUI Blazor WebView with images the rendering and scrolling is messed up (slow showing the images and infinite scrolling). Without images everything is working as expected.

Sample Project: GitHub Working reference with Blazor Server: GitHub

Steps to Reproduce

Create a Virtualize component with images e.g.:

            <Virtualize Context="employee" ItemsProvider="@LoadEmployees" ItemSize="47">
                <ItemContent>
                    <tr>
                        <td>@employee.Name</td>
                        <td>
                            <img src="@GetCommanderImgString(employee.Commander1)" alt="@employee.Commander1"
                                height="30" width="30" />
                        </td>
                        <td>
                            <img src="@GetCommanderImgString(employee.Commander2)" alt="@employee.Commander2"
                                height="30" width="30" />
                        </td>
                        <td>
                            <img src="@GetCommanderImgString(employee.Commander3)" alt="@employee.Commander3"
                                height="30" width="30" />
                        </td>
                        <td>@employee.EmployeeGuid</td>
                        <td>@employee.Number</td>
                    </tr>
                </ItemContent>
                <Placeholder>
                    <tr>
                        <td colspan="6">Loading ...</td>
                    </tr>
                </Placeholder>

            </Virtualize>

The images are rendering very slowly and infinite scrolling happens occationaly.

It should work as properly as in a Blazor Server Project.

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

windows10.0.19041.0

Did you find any workaround?

No response

Relevant log output

No response

[mkArtakMSFT]

Thanks for contacting us. Just to clarify, are you saying this is working fine on Blazor Server and it doesn't on Blazor Web assembly?

[ipax77]

Thanks for contacting us. Just to clarify, are you saying this is working fine on Blazor Server and it doesn't on Blazor Web assembly?

No, it is working fine on Blazor Server/wasm and it doesn't on MAUI Blazor (BlazorWebView)

[ipax77]

Upon further investigation with current Maui projects, the underlying issue seems to be that the BlazorWebView has no image cache and/or takes a long time to load images.

As a workaround I am prerendering the images with css, now:

    .preload-img {
        background-image: url("myimage.png");
        background-repeat: no-repeat;
        height: 30px;
        width: 30px;
        background-size: cover;
    }

I had a similar problem with ChartJs in BlazorWebView and rendering images into the chart-canvas, where I also had to preload the images to make them visible:

function preloadChartIcons(xWidth, yWidth) {
    const cmdrs = ["terran", "protoss", "zerg"];
    for (let i = 0; i < cmdrs.length; i++) {
        const img = new Image(xWidth, yWidth);
        img.onload = () => {
            cmdrIconsMap.set(cmdrs[i], img);
        };
        img.src = "_content/sc2dsstats.razorlib/images/" + cmdrs[i] + "-min.png";
    }
}

[homeyf]

Verified this issue with Visual Studio Enterprise 17.8.0 Preview 2.0. Can repro on windows platform with sample project. GitHub