.NET 8 RC2 Blazor WebAssembly禁用预渲染时如何显示加载进度？

可以实现，具体步骤如下：

1. 在wwwroot/index.html中添加静态加载UI
   因为禁用预渲染后，页面初始阶段没有Blazor组件渲染的内容，所以直接在静态HTML里添加加载旋转器，这是浏览器最先加载并显示的内容：

<!-- 放在<body>内部，Blazor挂载容器前后均可 -->
<div id="loading-ui" style="position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; z-index: 9999;">
    <div style="width: 50px; height: 50px; border: 5px solid #6c757d; border-top-color: #0d6efd; border-radius: 50%; animation: spin 1.2s linear infinite;"></div>
    <style>
        @keyframes spin {
            100% { transform: rotate(360deg); }
        }
    </style>
</div>

2. 在Blazor初始化完成后隐藏加载UI
   Blazor WebAssembly启动完成时会触发blazorstarted事件，我们可以监听这个事件来隐藏加载旋转器，在index.html的Blazor启动脚本后添加这段JS代码：

<script src="_framework/blazor.webassembly.js"></script>
<script>
    window.addEventListener('blazorstarted', () => {
        const loadingUI = document.getElementById('loading-ui');
        if (loadingUI) loadingUI.style.display = 'none';
    });
</script>

这样设置后，用户导航到页面时，会立刻看到加载旋转器，直到.NET Wasm运行时、JS资源加载完成且Blazor初始化完毕，加载UI会自动隐藏，和.NET 7中的加载体验一致。

内容的提问来源于stack exchange，提问作者Rick Wolff