Bootstrap-select plugin: how to avoid flickering

Question

The Bootsrap-select plugin is amazing (http://silviomoreto.github.io/bootstrap-select/). It provides an extremely easy way of creating gorgeous select menus in Bootstrap. The one problem I've encountered with it, however, is "flickering" on page load. What I mean by this is fairly straight forward:

1. The page loads with original HTML select element (which of course looks like crap)
2. The Bootstrap-select plugin JS runs
3. At some noticeable time after the page loads the original HTML select element is converted to a nice Bootstrap-select element by JS in Step (2).

So, the user first sees the HTML select element and then sees it switch to the pretty Bootstrap-select item, thus the "flickering".

Has anyone found a good solution to the problem?

Answer 1

The best and most simple answer:

Add the existing Bootstrap class invisible to your Select object on the markup page, whether it's an HTML Input element or HTML Select element: https://getbootstrap.com/docs/5.1/utilities/visibility/

e.g.

<input class="visible">...</div>
<input class="invisible">...</div>

This prevents the HTML version of the Select/DDL from being visible to the user, while reserving the space in the layout that the SELECT would take up (which is rendered in once the bootstrap-select JS is initialized).

Answer 2

This solution works for me:

<select class="selectpicker">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

<script>
    $('.selectpicker').selectpicker({  
        width: '100%'
    });
</script>

I just place the script right after the creation of the select drop-down, instead of waiting for the document to be ready!