Steffen,

ResourceLoader guarantees the order of module execution if there are dependencies, such that child always comes after parent, which always comes after grandparent in a dependency chain. Due to the concatenation of modules in the order requested, it's unlikely that modules will be executed in a different order each load. They would probably have to be in separate groups, and even then because of caching this wouldn't be repeatable without clearing the cache.

Looking at the timeline when loading the page, it appears that it is initially drawn incorrectly, and then there is something that causes a reflow about a second later which corrects it. Without really looking at your code, it would appear that this reflow may be caused by CSS coming too late, but it's odd how it appears to be the same style only with different dimensions.

But then I look at how the header cells have their width set in pixels. They seem to have a max width (though not in CSS) and are adjusted down when the browser is made too small to fit the table otherwise. This is probably being done using a resize handler, and there's the most likely culprit. Also, this is a very simple UI, but it takes more than a second to render, and I'm using a very new and powerful computer.

My suggestion is to set the size of the table cells in CSS using 14.2% (about 1/7th) for each column. Then perhaps setup a simple CSS grid, based on such percentages, for the events being overlaid on the cells. This would work by assigning a day-of-week and week-of-month class which would modulate the left and top position, and all events would be 1/7th width to match the columns. By specifying as much of the layout as possible in CSS, you will get far more efficient and responsive layout.

In conclusion, I suspect that ResourceLoader has nothing to do with your problem, but rather the way you are laying things out is inefficient and depends on a resize event to happen right after you are done building out the DOM. Depending on the browser, this may or may not happen, and in the best case it happens rather latently.

Also, be very careful with resize handlers. Debounce them when possible, and don't use them to change layouts unless you really have no other option. They fire at a very fast pace, at a time when the page is being constantly reflowed, and the events can queue up easily, leaving you with a ton of events to process, when only the latest one (hopefully the last one) needs to be addressed (or will really be visible in most cases).

Then again, I haven't seen the actual code, so I could be totally wrong. :)

- Trevor

On Sun, Feb 9, 2014 at 9:58 AM, Steffen Beyer steffen@beyer.io wrote:

Hi,

Hopefully this is the right place to ask...?

I wrote a small event calendar extension¹ utilising the FullCalendar jQuery plugin. Sometimes it happens that the display is garbled, see attachment. My current dirty fix is to rerender the calendar after a timeout².

My theory is that the outcome depends on the order of the JS and CSS resources being loaded, so it depends on server and network latency. Is this possible? Or can I be sure that all CSS is active when I init the calendar? If not, is there a ResourceLoader hook I can use? Other ideas?

Live Demo:

https://foodhackingbase.org/wiki/Events

Sincerely,

Steffen Beyer steffen@beyer.io

¹ https://github.com/improper/mediawiki-extensions-yasec ²

https://github.com/improper/mediawiki-extensions-yasec/blob/master/resources...

---

Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l