Rendering Performance when populating Nested Form - Rails 4 - OmniContacts

Question

In my app I am using the OmniContacts gem to allow users to import their contacts. This works. Getting the contacts for Gmail takes roughly 300-500ms.

In order to allow the importing of the contacts I am putting them in a nested form. Now the rendering of each contact takes 175-300ms, multiply this by 1000 and this are crappy.

I would love there to be a rails solution for this issue. Otherwise I am guessing using AJAX and a JS form might work. Your thoughts and time are appreciated.

Import Controller:

  def import
    @user = current_user
    @import = request.env['omnicontacts.contacts']
    @contacts = @import.map do |contact_info|
      Contact.new(
        first_name: contact_info[:first_name],
        last_name:  contact_info[:last_name],
        email_home: contact_info[:email],
        phone_home: contact_info[:phone]
      )
    end

    respond_to do |format|
      format.html
    end
  end

Import View:

<div class="row">
  <div class="small-12">
    <%= simple_form_for(@user, url: import_path) do |f| %>
        <%= f.simple_fields_for :contacts, @contacts do |contact| %>
            <%= render 'contact_fields', f: contact %>
        <% end %>
        <div class="actions" align="right">
          <%= f.submit class:"button tiny" %>
        </div>
    <% end %>
  </div>
</div>

Nested Form Partial:

<div class='nested-fields'>
  <fieldset>
  <div class="row">
    <div class="small-2 columns">
      <%= f.input :import, as: :boolean %>
    </div>
    <div class="small-2 columns">
      <%= f.input :first_name %>
    </div>
    <div class="small-2 columns">
      <%= f.input :last_name %>
    </div>
    <div class="small-4 columns">
      <%= f.input :email_home %>
    </div>
    <div class="small-2 columns">
      <%= f.input :phone_home %>
    </div>
  </div>
  </fieldset>
</div>

Log of Doom: (close your eyes and imagine 1000+ Rendered lines added)

Started GET "/oauth2callback?code=4/XzHDNPJ8RgRb7SFStQ3tVM-ff2q5WolrVHTsokI0egg" for ::1 at 2015-06-18 12:16:09 -0500
Processing by ImportsController#import as HTML
  Parameters: {"code"=>"4/XzHDNPJ8RgRb7SFStQ3tVM-ff2q5WolrVHTsokI0egg"}
  User Load (0.5ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
  Rendered imports/_contact_fields.html.erb (301.0ms)
  Rendered imports/_contact_fields.html.erb (233.9ms)
  Rendered imports/_contact_fields.html.erb (276.8ms)
  Rendered imports/_contact_fields.html.erb (180.3ms)
  Rendered imports/import.html.erb within layouts/application (1001.0ms)
  Rendered layouts/_header.html.erb (2.8ms)
  Rendered layouts/_footer.html.erb (3.8ms)
Completed 200 OK in 1548ms (Views: 1540.0ms | ActiveRecord: 0.5ms)

Answer 1

Turns out the issue was simple form. Changed form partial to:

<div class='nested-fields'>
  <fieldset>
  <div class="row">
    <div class="small-1 columns">
      <%= f.label "Import" %>
      <%= f.check_box :import %>
    </div>
    <div class="small-2 columns">
      <%= f.label :firs_name %>
      <%= f.text_field :first_name %>
    </div>
    <div class="small-2 columns">
      <%= f.label :last_name %>
      <%= f.text_field :last_name %>
    </div>
    <div class="small-4 columns">
      <%= f.label :email_home %>
      <%= f.text_field :email_home %>
    </div>
    <div class="small-3 columns">
      <%= f.label :phone_home %>
      <%= f.text_field :phone_home %>
    </div>
  </div>
  </fieldset>
</div>

Performance increased:

  Rendered imports/_contact_fields.html.erb (43.5ms)
  Rendered imports/_contact_fields.html.erb (1.0ms)
  Rendered imports/_contact_fields.html.erb (0.7ms)
  Rendered imports/_contact_fields.html.erb (0.7ms)
  Rendered imports/import.html.erb within layouts/application (407.4ms)