Synchronous operations are disallowed. When adding HTML to Page file in Blazor Webapp

Question

I have a very basic webapp made from the dotnet new blazor template. I added another file to Pages folder, called it Services.razor and the content is as follows

@page "/services"

<PageTitle>Services</PageTitle>

<div class="mb-6">
    <ul class="inline-flex flex-wrap text-sm font-medium">
        <li class="flex items-center">
            <a class="text-slate-500 hover:text-indigo-500" href="/"> <svg xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 mr-1">
                        <path fill-rule="evenodd"
                            d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                            clip-rule="evenodd" />
                    </svg></a>
                <svg class="h-4 w-4 fill-current text-slate-400 mx-3" viewBox="0 0 16 16">
                    <path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
                </svg>
            </li>
        <li class="flex items-center">
            <a class="text-slate-500 hover:text-indigo-500" href="#">Services</a>
        </li>
     </ul>
</div>

but if I add more HTML I get the error

An unhandled exception occurred while processing the request. InvalidOperationException: Synchronous operations are disallowed. Call WriteAsync or set AllowSynchronousIO to true instead. Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpResponseStream.Write(byte[] buffer, int offset, int count)

here is the file after errors show up. No changes were made anywhere else, only added this additional HTML

@page "/services"

<PageTitle>Services</PageTitle>


 <div class="mb-6">
    <ul class="inline-flex flex-wrap text-sm font-medium">
        <li class="flex items-center">
            <a class="text-slate-500 hover:text-indigo-500" href="/"> <svg xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 mr-1">
                        <path fill-rule="evenodd"
                            d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                            clip-rule="evenodd" />
                    </svg></a>
                <svg class="h-4 w-4 fill-current text-slate-400 mx-3" viewBox="0 0 16 16">
                    <path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
                </svg>
            </li>
        <li class="flex items-center">
            <a class="text-slate-500 hover:text-indigo-500" href="#">Services</a>
        </li>
    </ul>
</div>

    <div class=" selection:email">
        <div class="mb-4 pl-2 border-b-2 border-slate-300">
            <div class="flex">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                </svg>
                <span class="ml-3 text-lg font-semibold">Email</span>
            </div>
        </div>
        <div class="w-full  bg-slate-200 rounded-lg">
            <div class="flex justify-between p-2 pt-4 m-4 border-b-2 border-slate-300">
                <span class="text-2xl">Email 5</span>
                <div class="flex">
                    <span class="text font-normal rounded-full px-4 py-1 mx-1 bg-blue-200">Included with SSP</span>
                    <span class="text font-normal rounded-full px-4 py-1 mx-1 bg-indigo-200">Subscription</span>
                </div>
            </div>
            <div class="flex justify-between p-2 m-4">
                <div>
                    <span class="text-2xl font-semibold">3</span>
                    <div>
                        <span class="text-xs font-normal">3/5 email accounts active</span>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between">
                        <div class="text-xl font-bold text-slate-800">$0.00</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="selection:email mt-12">
        <div class="mb-4 pl-2 border-b-2 border-slate-300">
            <div class="flex">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                </svg>
                <span class="ml-3 text-lg font-semibold">Devices</span>
            </div>
        </div>
        <div class="w-full  bg-slate-200 rounded-lg">
            <div class="flex justify-between p-2 pt-4 m-4 border-b-2 border-slate-300">
                <div class="flex">
                    <span class="text-2xl">SecureLock</span>
                    <span class="grid content-end content-bottom pl-2">android</span>
                </div>
                <div class="flex">
                    <span class="text font-normal rounded-full px-4 py-1 mx-1 bg-indigo-200">Subscription</span>
                </div>
            </div>
            <div class="flex justify-between p-2 m-4">
                <div>
                    <span class="text-2xl font-semibold">3</span>
                    <div>
                        <span class="text-xs font-normal">3/5 email accounts active</span>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between">
                        <div class="text-xl font-bold text-slate-800">$0.00</div>
                </div>
            </div>
        </div>
    </div>
</div>

All the material I find is references to code that a person added. I didn't add or change a single line of C#, only added more HTML to a page.

UPDATE

Some more digging revealed that if I add HTML to the out-of-the-box blazor template index.razor file. I can get this error to show up. Just add the following HTML (or any other valid text) until you have about 20,000 characters in the file

<div class=" selection:email">
    <div class="mb-4 pl-2 border-b-2 border-slate-300">
        <div class="flex">
            <span class="ml-3 text-lg font-semibold">Email</span>
        </div>
    </div>
    <div class="w-full  bg-slate-200 rounded-lg">
        <div class="flex justify-between p-2 pt-4 m-4 border-b-2 border-slate-300">
            <span class="text-2xl">Email 5</span>
            <div class="flex">
                <span class="text font-normal rounded-full px-4 py-1 mx-1 bg-blue-200">Included with SSP</span>
                <span class="text font-normal rounded-full px-4 py-1 mx-1 bg-indigo-200">Subscription</span>
            </div>
        </div>
        <div class="flex justify-between p-2 m-4">
            <div>
                <span class="text-2xl font-semibold">3</span>
                <div>
                    <span class="text-xs font-normal">3/5 email accounts active</span>
                </div>
            </div>
            <div>
                <div class="flex justify-between">
                    <div class="text-xl font-bold text-slate-800">$0.00</div>
                </div>
            </div>
        </div>

    </div>
</div>

It seems directly related to the amount of HTML it needs to render. You can add HTML to the SideBar file and see the same error.

Remember this is the new Blazor WebApp template, not WASM or Server.

My System

Framework Laptop
Windows 11
VS Code
.NET SDK8 Preview 6