Slow loading speed when using CustomItem (and custom CellTemplate)

[APusch-Tenno]

hello,

when I use the CustomItem and an own design template for the appointments, the calendar on first load looks very distorted until it finally loads the data. Those are only hardcoded appointments and not even many.

I have this issue for quite a while, but now I need to tackle it, before actually loading real data into the calendar (which might slow it down even more).

You probably don't remember when I sent you a testproject regarding a different issue, so I will attach that project again, since this issue is also noticable there.

Is this an issue with the calendar or even (Mud)Blazor or am I doing something wrong there?

Again thanks for your support.

MudCalendarTest.zip

[danheron]

It looks distorted because the stylesheet is not loading until the end. You can force it to load the stylesheet immediately by adding a link to the head element in _Host.cshtml

<link href="_content/Heron.MudCalendar/Heron.MudCalendar.min.css" rel="stylesheet" />

You can also add the javascript file to _Host.cshtml

<script src="_content/Heron.MudCalendar/Heron.MudCalendar.min.js"></script>

I notice that you are also loading scripts in the head element. For page load times its normally best to load them at the end. e.g. put your scripts like MudBlazor.min.js after where you have blazor.server.js.

[APusch-Tenno]

Both link and script are already present in _Host.cshtml and now I put all scripts after blazor.server.js, but I see no change.

In my original project there are multiple pages and none of them have that issue. But the calendar is the only one being loaded from another project. Although this is the case with your solution as well.

I added a CustomItem to CalendarTest.razor and it might load a tiny bit slower visually, but still completely fine. But I noticed when I set Heron.MudCalendar.UnitTests.Viewer.Server to standard, the loading speed is slower on all of your pages, but not nearly as slow as in my case (about 3 seconds to load the appointments).

So I assume it has something to do with the (pre)rendering in a server-side project. I had tried to change the rendering mode regarding other issues, but this caused more issues in return, so I wouldn't want to fiddle with that.

I'm still quite new to blazor, so any suggestions would be very helpful.

[danheron]

I don't know how to help because the example you sent worked fine on my system. The display was distorted for a few hundred milliseconds at first before I added the stylesheet link. After I added the link it looks fine immediately and the appointment is loaded in a few hundred milliseconds.

I think you need to debug it on your system to see what is taking so long.

[APusch-Tenno]

Sorry, for some reason I misread both files as the MudBlazor ones. Maybe I need vacation or more sleep... or both...

After adding both the distortion is gone. But I actually realized the appointments are loading in like half a second (which would be okay, if it stays that way, even with a lot more appointments to load). What is still taking 3 seconds is the automatic scroll to the set DayStartTime in week view. Day view loads a bit faster, but the more days the longer it loads (1d -> 5d -> 7d).

This can also be seen with the 1.1.2 solution, but only when setting Heron.MudCalendar.UnitTests.Viewer.Server as standard start project. So again, it might have something to do with (pre)rendering in server-based blazor, but I don't know how to fix that, if its even possible.

[danheron]

Yeah, that's the tradeoff with using pre-rendering - the page display's quicker but doesn't become interactive immediately. Try turning off pre-rendering and see if that is better for you.

But I don't see why it takes so long on your system, or why the number of days matters, it's just a little bit more html. Are you running on localhost? Are you throttling the connection in your browser tools or something?

[APusch-Tenno]

Turning off prerendering doesn't seem to have any noticeable change. Since I can reproduce that effect with your solution by switching to the server-side project, my focus would be on all server app related things. But as mentioned I don't have enough knowledge to exactly determine whats causing this. This project is supposed to be a server app, so trying a WASM app is off the table for me.

The browser tools say "no throttling" and I am not aware of any external throttling. It is running on localhost and I haven't been able to make it accessible via ip address. All instructions I found online didn't work, although it might have to do with using the built-in IISexpress in Visual Studio. I probably need to setup a web server on my machine to check if that makes a difference.

Not sure why the days matter, but day view loads in about a second, 5 day week in about 3 seconds and 7 day week in about 5 seconds. But again its not the appointments not loading, its the calendar jumping to the start time (in my case 8 am). I can even scroll past that to like 11 am looking at the appointsments already there and when its done with whatever it is doing in the background it is jumping back up to 8 am.

[danheron]

I hope you fix your problem, but I'm going to close this issue because I don't think it is anything to do with MudCalendar.