In general web development, there are useful patterns to improving the perceived performance in a web page. A great example is this blog post:
Once you understand the core concepts of the post (even tough it’s about ASP.NET MVC), you should be able apply similar patterns with CRM Web Resources. You can achieve the same thing by breaking up your UI pieces into separate web resources and laying them out on the form appropriately. Or you can have separate div tags in your web resource for each thing that needs to be loaded discretely. Often times, in CRM, people want to have the similar spinning loading indicator while the initialization of the web resource is happening. I’ve put together a little sample of how I do it. I’ve packaged it up as a managed solution you can download and review:
Here’s a quick video of it in action:
All I did was add the dkdt_/simulateslowload.htm web resource to the form.
Basically, what happens is when the web resource loads it has the real content hidden. I simulate an asynchronous web service call using setTimeout with a delay of 3 seconds. The idea is that the real content gets fully generated after the web service call is complete. Therefore, a delay. While we’re waiting, I show a loading animation via an overlaid IFrame. Once the 3 seconds are over, I hide the animation and show the content.