如何在加载 wasm 部分时显示加载进度（.NET 8，无预渲染）

Question

在 Blazor WASM 独立应用程序中，这很容易，因为有专门的元素：

<div id="app">Loading...</div>

一旦应用程序加载，它就会被替换。

在 .NET 8 上的 Blazor 中，情况则不同。考虑这两页：

@page "/home"

@page "/wasmPage"
@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))

当从 过渡/home到/wasmPageBlazor 时，会删除 的内容<main>，将其替换为bl-load注释并开始加载必要的文件...

我们没有任何元素可以显示该Loading...消息。

有什么可以订阅的吗？

来源，我发现：

• 也许答案隐藏在启动文档中，它描述了如何自己开始加载，但这不是我想要做的..
• 一旦加载过程开始，--blazor-load-percentagecss 变量就会出现。我可以想出一个解决方案，检查是否存在等，但我希望有更好的方法。
• 编辑加载脚本可能是一个选项，但同样 - 我希望有一个更简单的解决方案。

经过讨论后，@MrC aka Shaun Curtis很明显解决方案是存在的 - 使用预渲染页面。基本上仅在服务器上生成页面时放置Loading...（预渲染）。（关于SO的类似问题）。这不包括我的预渲染设置为 false 时的情况。我还是想看看是否有解决方案。

有任何想法吗？

Answer 1

最后想出了一个好的解决办法：

<div class="[&>*:last-child:not(:first-child)]:hidden">
      @Body
    <div >
        Loading...
    </div>
</div>

它隐藏最后一个元素（正在加载...），但仅当它不是第一个元素时才隐藏。

换句话说：显示Loading..., 直到填充@Body。