View Transitions API with Blazor WASM

[Erakx]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

View Transitions API is now available in stable Chrome.

Link to documentation : https://developer.chrome.com/docs/web-platform/view-transitions/

What is the best way to use this with Blazor when navigation occurs ?

When i try : c# code : private` DotNetObjectReference? objRef;

protected override void OnInitialized() { objRef = DotNetObjectReference.Create(this); }

protected override async Task OnInitializedAsync() { await jsRuntime.InvokeVoidAsync("startViewTransition", objRef); }

[JSInvokable] public async Task GetData() { data = await repository.GetData(); StateHasChanged(); }

js code : window.startViewTransition = (dotNetHelper) => { // Fallback for browsers that don't support this API: if (!document.startViewTransition) { dotNetHelper.invokeMethodAsync('GetData'); return; } // With a transition: document.startViewTransition(() => dotNetHelper.invokeMethodAsync('GetData')); };

It works, but this is not perfect because the View Transitions API takes a "screenshot" of the initial state.

Thanks for your help !

Expected Behavior

No response

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

7

Anything else?

No response

[javiercn]

@Erakx thanks for contacting us.

While we try our best to answer all questions, this type of question goes a bit beyond what we can offer here. The API in question is pretty new and we do not have a particular opinion yet on how best to integrate it. Proper integration likely requires a feature in the framework, but it is unlikely we do anything until the API becomes supported across browsers and we see significant usage.

What you are doing right now is probably fine, you might try to centralize the logic for loading and signaling into a single service instead of having that on your components, but there's no silver bullet here.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[Erakx]

Hi @javiercn thank you for your response!

I will try your suggestion, but you're right, this is not a problem. I will create a new post in "Feature request" with a better explanation of the problem.

The problem is when there is "placeholder" when loading data. Shouldrender false does not stop the Blazor rendering of the placeholder. There are solutions, but it's doesn't seem to be "clean".

Anyway thank you for your quick response!

[javiercn]

@Erakx the component will always render the first time, but that's a behavior of ComponentBase, you can create your own class to control how your component renders.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.