Question

I’m using the nice Select2 for multiple select fields on my web applications search page. One can search for people by company/industry/school. Because there are hundreds of searchable values for each, it is taking time for the correct select2 css to load (about 1 second). The old ugly select fields can be seen in a flicker before the pretty select2 fields display. Attached are two screenshots that show the transition.

Here is my view code:

        <%= form_tag('', :method => :get) do %>
          <div class="row-fluid">  
            <div class="span4">
              <label>What industries have they worked in?</label>
                <%= select_tag "industry_ids", options_for_select((@visible_industries), params[:industry_ids]), { :placeholder => "Type to search...", :multiple => true, :id => "e3", :onchange => 'this.form.submit();' } %>
                <%= hidden_field_tag :&, params[:industry_ids] %>
            </div>
            <div class="span4">
              <label>What companies have they worked at?</label>
                <%= select_tag "company_ids", options_for_select((@visible_companies), params[:company_ids]), { :placeholder => "Type to search...", :multiple => true, :onchange => 'this.form.submit();' } %>
                  <%= hidden_field_tag :&, params[:company_ids] %>           
            </div>
            <div class="span4">
              <label>Where did they go to school?</label>
              <%= select_tag "school_ids", options_for_select((@visible_schools), params[:school_ids]), { :placeholder => "Type to search...", :multiple => true, :onchange => 'this.form.submit();' } %>
                <%= hidden_field_tag :&, params[:school_ids] %>
            </div>
            <div class="row-fluid">
          <% end %>
        </div>
      </div>

And controller code:

  def people
    @current_user = current_user

    @visible_positions = Position.where{ is_visible.eq('true') }
    @visible_educations = Education.where{ is_visible.eq('true') }

    @visible_companies = @visible_positions.order("LOWER(company)").all.map { |p| [ p.company, p.company ] }.uniq
    @visible_industries = @visible_positions.order("LOWER(industry)").all.map { |p| [ p.industry, p.industry ] }.uniq
    @visible_schools = @visible_educations.order("LOWER(school)").all.map { |e| [ e.school, e.school ] }.uniq

    @c = @visible_positions.where{company.in(my{params[:company_ids]})}.map(&:user_id)
    @i = @visible_positions.where{industry.in(my{params[:industry_ids]})}.map(&:user_id)
    @s = @visible_educations.where{school.in(my{params[:school_ids]})}.map(&:user_id)

    unless @c.empty? && @i.empty? && @s.empty?
      @users = User.find([@c,@i,@s].reject(&:empty?).reduce(:&))
    end

  end

Finally, I have this javascript in my assets directory (in addition to the select2 css):

$(document).ready(function(){

  $('select').select2({
    minimumInputLength: 1
  });
});

What can I do to prevent this flicker from happening? Thank you.

Answer 1

I’ll post my comment as an answer since it solved your issue.

My suggestion would be to hide the selects till the page is fully loaded (and select2 applied).

In the stylesheet, add a input {display:none;} rule to hide them (although visibility:hidden might be better). Then with jQuery override that rule $('input').css("display","inline");.