Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Blazor WASM loading progress indicator #31145

Merged
merged 4 commits into from
Jan 8, 2024

Conversation

guardrex
Copy link
Collaborator

@guardrex guardrex commented Nov 28, 2023

Fixes #31048
Addresses #28161

I built something that doesn't match what Javier described at dotnet/aspnetcore#52076 (comment). The 🦖 RexHax!™ approach on the PR seems to work, but I suspect it has some 🐉🐉🐉. It at least doesn't seem to be right for WASM components that don't prerender.


Internal previews

📄 File 🔗 Preview link
aspnetcore/blazor/components/rendering.md ASP.NET Core Razor component rendering
aspnetcore/blazor/fundamentals/startup.md ASP.NET Core Blazor startup

@guardrex guardrex self-assigned this Nov 28, 2023
@mkArtakMSFT
Copy link
Member

@SteveSandersonMS can you please review this? Thanks!

Copy link
Member

@SteveSandersonMS SteveSandersonMS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit of a complicated solution but I appreciate it has the benefit that, if you want to, you can load data as normal and use persistent component state to transfer that data to the client.

In the other case where a developer definitely does not plan to transfer any loaded data via persistent component state, a much simpler and more efficient solution would be to not use @rendermode=InteractiveWebAssembly on their root component, but instead just go back to using builder.RootComponents.Add(...) in the Program.cs of their WebAssembly project. They can then use exactly the same markup and CSS as is used in the Standalone Blazor WebAssembly template, and don't need to introduce extra wrapper components.

So ultimately the best option depends on the app scenario, but I do appreciate that what you have here will work.

@guardrex
Copy link
Collaborator Author

guardrex commented Jan 8, 2024

Thanks. I'll go with this for now.

If you want coverage for the approach that you described, I'll work it via a new issue, but I'll need to see it fully implemented or explained further because it doesn't seem like its exactly like the markup of a standalone WASM app. What's the selector for the root component and where the selector is placed in the BWA? What are the details and gotchas 😈 for that approach in the BWA's layout and routing contexts? Let me know if you want it covered👂... if so, I'll open a new issue and we can go over how that works in more detail.

@guardrex guardrex merged commit acffa6e into main Jan 8, 2024
3 checks passed
@guardrex guardrex deleted the guardrex/blazor-loading-progress-updates branch January 8, 2024 12:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Document how to display a loading UI for interactive WebAssembly rendering
3 participants