Hi, I'm having issues with the loading process of my Blazor WebAssembly module in Blazor WebApp project.
Loading recording: https://stgambit-my.sharepoint.com/:v:/p/blazej_leporowski/ES0tOPaTj11PqEIJjNEUSh0BdG3mc35imkOdk45mOMtXeA?e=Mt7M56
Initial load problems When the project starts, I can see the parts of the UI that come from the project itself, and some ABP modules. I canno see the menu for my module. This is probably as expected, as those modules have also server side versions?
However, for some time i cannot interact with the site in any way, even though it apperas as loaded. After 20s to 30s, my module loads. The module has been created using the ABP studio, and choosing the WebAssembly UI option.
This is my first question: Is there any way to make the module use the server side rendering first as well?
As you can see from the recording, there is another issue right away: the text in the filtering box does not fit in the box itself. This does not look good. As the menu, its design etc come out of the box, my second question is thus how to fix that issue? What can be causing it?
Module load problems Around the 20s mark, when the module loads, we can see two new issues. First one comes from the menu bar again: all the icons are gone. Do you have any suggestions what may be causing the icons to disappear from the menu, and how to fix that?
Secondly, upon the module load the entire body of the app gets stretched without any obvious reason. Again, there is nothing in the browser console logs to indicate any sort of issue. Have you ever encountered this issue? How can it be fixed?
Either I have managed to find several bugs all at once, or there is something about the way my app is linked with the custom module that creates those issues. I beleive I have followed all the reommendations from the docs, and have created the module using ABP studio. We've had those issues ever since we have first created the project.
8 Answer(s)
-
0
I think it's similar to https://abp.io/support/questions/8834/Critical-perfomance-issue-Blazor-webapp-interactive-auto
There is a performance issue on WebApp loading currently. but it seems some modules has different visuals on server-side render and client-side render, that may cause this dashboard visual changes
-
0
Regarding the loading time, it is probably exactly as you say. However, waht about the icons suddenly vanishing from all menus, and the body of the page suddenly expanding vertically?
-
0
Regarding the loading time, it is probably exactly as you say. However, waht about the icons suddenly vanishing from all menus, and the body of the page suddenly expanding vertically?
Hi, since Blazor WebApp, first acts as a Blazor Server app and then continue as Blazor WASM application (after wasm downloaded to the browser), unfortunately, this kind of shifting happens sometimes.
-
0
I'm not sure that this is the case. Even in the thread you mentioned, https://abp.io/support/questions/8767/Lagging-and-loading-time-of-Blazor-Web-App-Template-Application, it can be seen that this stuff does not happen. The lag in loading, yes, but not the other issues.,
I appreciate your reluctance to jump into such a vague problem, but this is a critical issue for us. I would very much like to use my support token on this problem. I can provide the project, the har file from the network inspector, etc.
-
0
[blepo] said: I'm not sure that this is the case. Even in the thread you mentioned, https://abp.io/support/questions/8767/Lagging-and-loading-time-of-Blazor-Web-App-Template-Application, it can be seen that this stuff does not happen. The lag in loading, yes, but not the other issues.,
I appreciate your reluctance to jump into such a vague problem, but this is a critical issue for us. I would very much like to use my support token on this problem. I can provide the project, the har file from the network inspector, etc.
Hi, thanks for the update. I'll create a new Blazor Web App to try and reproduce the issue on my end. Once I’ve had a chance to investigate it in detail, I’ll get back to you with my findings as soon as possible.
Regards.
-
0
Hi, during this weekend i managed to isolate the problematic code and create a workaround. The issue is in App.razor file in the Blazor project. The App.razor is generated automatically by the Blazor WebApp template from ABP studio. This line:
<AbpStyles BundleName="@BlazorLeptonXThemeBundles.Styles.Global" WebAssemblyStyleFiles="GlobalStyles" @rendermode="InteractiveAuto" />Causes the app to reload styles upon the WebAssembly module load. This causes the styling of the app to go all over the place, the icons disappear, etc. Removing the 'WebAssemblyStyleFiles' option and manually including the style css files actually fixes the issue:
<AbpStyles BundleName="@BlazorLeptonXThemeBundles.Styles.Global" @rendermode="InteractiveAuto" /> <!-- Manual CSS links --> <link href="global.css" rel="stylesheet" /> <link href="main.css" rel="stylesheet" /> <link href="blazor-global-styles.css" rel="stylesheet" />I don't know, however, why this happens. Is it a bug in ABP, or something about my configuration? Either way, is anyone encounters a similar problems, this seems to work for now.
-
1
hi
during this weekend i managed to isolate the problematic code and create a workaround.
What is your test project package version?
We did some changes in >=
9.1.1https://github.com/abpframework/abp/pull/22357
-
0
If your test project >= 9.1.1
Please share it with liming.ma@volosoft.com
Thanks.
