Blazor WASM Client Application requires to have certain hover events of menu items on a web browser screen and click events on tablet size screens. In order to receive the browser-screen width, js interop and an additional Browser service are used (similar to the approach in https://blazor.tips/blazor-how-to-ready-window-dimensions/) to get the width and apply conditions on event handling. But if this Blazor App is initially loaded on a web browser (say >1000px screen having hover events) and when resized to a tab width (say <992px screen having click events for the same menus), the page needs a refresh to re-render the widths after resizing into the razor component.
Is there any alternative to read the dynamic changing of screen width into the component in the Blazor App?
Note: There is a way to detect the screen sizes using BlazorPro. BlazorSize package https://github.com/EdCharbeneau/BlazorSize but unfortunately, it is not working for me
One way to avoid this problem is to make a synchronous js call (by using IJSInProcessRuntime) in the button click events from Blazor (usually JSRuntime is an async approach) so that there won't be any waiting time on the screen to see the result.
check on how to invoke a JavaScript function synchronously in the following links https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1#invoke-net-methods-from-javascript-functions
https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-performance-best-practices?view=aspnetcore-5.0
https://www.meziantou.net/optimizing-js-interop-in-a-blazor-webassembly-application.htm