When the page loads the menu takes anywhere from 0.1 to 5 seconds to load. I have noticed this problem is the worst on Google Chrome with the debug tools open, and least noticeable on Internet Explorer 11 with the debug tools closed. I am unsure what is causing the slow rendering as the PanelBar I have in the same page does not have this problem and is rendered at the same time as the rest of the page. The menu is being created with the json datasource method.
Please let me know what I can do to speed up the rendering.
5 Answers, 1 is accepted
By design, the rendering of the menu should not take such time. This is why, we would need to inspect your implementation, in order to replicate the problem and pin down the reason for it. It would be best, if you could send is a runnable example, demonstrating the problem.
Regards,
Nencho
Telerik by Progress
Rank 1
Hello,
Sorry for the late reply.
I have made a Plunkr demo which shows the issue I am having. It seems to be quite intermittent and in some cases took 5-10 refreshes to see, but when it shows it looks as if the kendo style has not been applied (list is vertical), then quickly switches to the correct kendo look. The whole process takes less than a second.
The Plunkr is available here.
I have tested the behaviour, using the provided example. It seems, however, that the slow rendering observed in is specific for it. I mean that there are probably some resources that the needs in order to visualise the code, which is causing the waiting.
I have tested the very same implementation, using the same version as you do, but the issue does not appear. Please give it a try at your end:
http://runner.telerik.io/fullscreen/@nenchef/Imete/2
If the issue still persists, please send the HTML file, where you use the menu, so we could test the real-life scenario.
I am looking forward to your reply
Regards,
Nencho
Telerik by Progress
Rank 1
Hello Nencho,
I have tried your example and I am seeing the issue. This issue is the one I am seeing in my production application. I am seeing the page load with just the text "This is a test" then a split second later I see the text move down and the menu appear above. The process was maybe half a second each time I refreshed the page.
When on my production application this causes the whole page layout to move.
I am using Google Chrome version 57 if that helps. I do not see the issue in Internet Explorer 11, but I was only rarely able to see it in my application.
To reproduce the issue I was simply reloading the page.
Regards,
James
Such time - less than 0.5s is expected because first, the HTML needs to be rendered on the page when the styles and scripts should be applied to that HTML.
However. in order to avoid the flickering and the initial display of the ul and li elements, I would suggest you the following workaround:
http://dojo.telerik.com/@nenchef/Imete/16
Regards,
Nencho
Telerik by Progress