We have an XPage with over 100 complex fields on it and we found that applying Select2 to it took a noticeable amount of time – tangible to the user.

Users would see the original “SELECT” fields before the nicer select2 style was applied.

So we determined to hide all the fields on the form until select2 was finished loading, then show them all select2’d. The problem was that we could not find an obviously way to do this. I was looking for a parameter within the select2 and I could not get anything to work. So I looked elsewhere…..

We decided to hide all the form fields with a <STYLE> on the main section. Then when the select2 was finished brought them into view. The experience is much better on the user.

$.when(
   $("select[class*='select2']" ).select2({
    allowClear: true
  })
).done(function(){
     $('#mainContent').css({'visibility': 'visible'})
});

Using the jQuery .when() causes the code to be synchronous, so I know that it will be triggered when the select2 code is finished.

For more on .when() check out the API http://api.jquery.com/jquery.when/