Optimizing Front-end code

Question

I have a view on Ruby on Rails, and it works fine, but my problem is that it takes quite sometime before the page loads. This is some of the code:

Main tab

<div class="tab-content">
                 <div class="tab-pane fade in active" id="tabconstituent">
                     <h3>Constituent Database</h3>
                     <ul class="nav nav-tabs">
                      <li class="active"><a href="#tabconstinbox" data-toggle="tab">Inbox</a></li>
                      <li><a href="#tabconstsent" data-toggle="tab">Sent</a></li>

                    </ul>

                  <div class="tab-content"> 
                      <div role="presentation" class="tab-pane fade in active" id="tabconstinbox">
                          <div class="container-fluid">
                              <br />
                              <div class="col-lg-6 pull-right">
                                <div class="input-group pull-right" id="searchDrafts">
                                  <input type="text" class="form-control"  placeholder="Search for">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default"  type="button">
                                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                    </button>
                                  </span>
                                </div><!-- /input-group -->

                                <div class="dropdown">
                                     <button class="btn btn-default dropdown-toggle pull-right" type="button" id="dropdownDrafts" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        Filter by
                                        <span class="caret"></span>
                                     </button>
                                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a href="#">Sent to</a></li>
                                    <li><a href="#">Subject</a></li>
                                    <li><a href="#">Date</a></li>
                                  </ul>
                                </div>
                             </div><!-- /.col-lg-6 -->
                             <%= will_paginate @received_messages %>
                              <%= form_tag destroy_many_received_messages_path, method: :post do %>
                             <table class="table table-striped">
                                 <thead>
                                    <tr>
                                      <th><input type="checkbox" id="checkbox_all" /></th>
                                      <th data-field="sender" data-sortable="true">Sender</th>
                                      <th data-field="complaint" data-sortable="true">Complaint</th>
                                      <th data-field="location" data-sortable="true">Location</th>
                                      <th data-field="subject" data-sortable="true">Subject</th>
                                      <th data-field="department" data-sortable="true">Department</th>
                                      <th data-field="action_taken" data-sortable="true">Action Taken</th>
                                      <th data-field="status" data-sortable="true">Status</th>
                                      <th data-field="date" data-sortable="true">Date</th>
                                    </tr>
                                 </thead>
                                 <tbody>

                                    <% @received_messages.each do |received_message| %>
                                      <tr>
                                        <td><%= check_box_tag "message_ids[]", received_message.id%></td>
                                        <td><%= received_message.name%></td>
                                        <td><%= received_message.message %></td>
                                        <td><%= received_message.district %> <%= received_message.barangay %></td>
                                        <td><%= received_message.subject %></td>
                                        <td><% received_message.departments.uniq.each do |department|%>
                                              <%= department.name %> 
                                            <% end -%></td>
                                        <td><%= received_message.action_taken %></td>
                                        <td><%= received_message.status %></td>
                                        <td><%= received_message.created_at %></td>
                                      </tr>
                                    <% end %>
                                 </tbody>
                             </table>  

                             <%= submit_tag "Delete", id:"buttonConstInbox_Delete", :class =>"btn btn-primary"%>
                             <%= submit_tag "Update", id:"buttonConstInbox_Update", :class =>"btn btn-primary", remote: true, 'data-toggle' => "modal", 'data-target' => "#constSentModal" %>
                             <%= submit_tag "Attach", id:"buttonConstInbox_Attach", :class =>"btn btn-primary" %>
                             <% end %>

                         </div><!-- /.container-fluid -->
                      </div>
                      <div role="presentation" class="tab-pane fade" id="tabconstsent">
                          <div class="container-fluid">
                              <br />
                              <div class="col-lg-6 pull-right">
                                <div class="input-group pull-right" id="searchDrafts">
                                  <input type="text" class="form-control"  placeholder="Search for">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default"  type="button">
                                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                    </button>
                                  </span>
                                </div><!-- /input-group -->

                                <div class="dropdown">
                                     <button class="btn btn-default dropdown-toggle pull-right" type="button" id="dropdownDrafts" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        Filter by
                                        <span class="caret"></span>
                                     </button>
                                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a href="#">Sent to</a></li>
                                    <li><a href="#">Subject</a></li>
                                    <li><a href="#">Date</a></li>
                                  </ul>
                                </div>
                             </div><!-- /.col-lg-6 -->
                             <%= will_paginate @send_messages %>
                             <%= form_tag destroy_many_received_messages_path, method: :post do %>
                             <table class="table table-striped">
                                 <thead>
                                    <tr>
                                      <th><input type="checkbox" id="checkbox_all" /></th>
                                      <th data-field="sent_to" data-sortable="true">Sent To</th>
                                      <th data-field="message" data-sortable="true">Message</th>
                                      <th data-field="status" data-sortable="true">Status</th>
                                      <th data-field="date" data-sortable="true">Date</th>
                                    </tr>
                                 </thead>

                                  <tbody>
                                    <% @send_messages.each do |send_message| %>
                                      <tr>
                                        <td><%= check_box_tag "message_ids[]", send_message.id%></td>
                                        <td><%= send_message.mobile_number%></td>
                                        <td><%= send_message.message %></td>
                                        <td><%= send_message.status %></td>
                                        <td><%= send_message.created_at %></td>
                                      </tr>
                                    <% end %>
                                 </tbody>

                             </table>    
                            <% end %>
                             <button type = "button" id="buttonConstSent_Delete" class = "btn btn-primary">Delete</button>
                         </div><!-- /.container-fluid -->
                      </div>
                  </div><!-- /.tab-content inbox/sent/trash-->

There are 5 more tabs that are identical to that, and I have a feeling the reason why it takes a while to load is because, each time a load that page, it loads everything, not the tab I'm currently on. This becomes a big problem especially when I want to paginate the data and each page loads all tabs. Is there any way to better optimize this code? Thank you.

Answer 1

The best solution for this is to make partial for each tab and load those partials through ajax when you click on that tab.

First, render the main page and add remote: true to tab links. When you click on tab link render partial through js.

I hopes this will help you.

Answer 2

create a partial with the name _tab.html.erb and use

remote: true

To use ajax which actually works to render the JS code where you can do whatever you that is the actual workflow.

If you want to call your partial just render it by

render "tab.html.erb"