Usando Rails, he creado una aplicación web. Una de las páginas de la aplicación web muestra una tabla que utilizaAPI de DataTables. EstaJSFiddle muestra un ejemplo de cómo se ve mi aplicación web.

El problema con esto es que cuando comienzo a agregar grandes cantidades de datos (los datos de prueba actuales son 1500 filas), la tabla carga cada fila primero antes de ejecutar el JavaScript, lo que significa que obtiene una tabla sin formato durante unos segundos antes de que el Javascript entre en funcionamiento y se activa DataTables.

Me gustaría mostrar una flecha giratoria, o procesar un mensaje (algo así en esa línea) en lugar de la tabla hasta que la página se haya llenado por completo, una vez que haya terminado, me gustaría ejecutar mi JavaScript activando DataTables.

EDITAR: mi problema principal es que no estoy seguro de cómo usar Javascript para mostrar el control de giro mientras se carga la tabla, pero luego cambiar a la tabla una vez que la página ha terminado de cargarse

Mi código es el siguiente:

HTML / eRB

<div class="list">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table id="app-list-table" class="display table" cellspacing="0">
                    <thead>
                        <tr class="table-headers">
                            <th>Header 1</th>
                            <th>Header 2</th>
                            <th>Header 3</th>
                            <th>Header 4</th>
                            <th>Header 5</th>
                            <th>Header 6</th>
                            <th>Header 7</th>
                            <th>Header 8</th>
                            <th>Header 9</th>
                            <th>Header 10</th>
                        </tr>
                    </thead>
                    <tbody>
                        <%= Server.find_each do |server| %>
                        <tr>
                            <td><%= link_to(server.server_name, server_path(server)) %></td>
                            <td><%= server.application %></td>
                            <td><%= server.server_role %></td>
                            <td><%= server.team_contact %></td>
                            <td><%= server.individual_contact %></td>
                            <td><%= server.business_owner %></td>
                            <td><%= server.vendor %></td>
                            <td><%= server.vendor_contact %></td>
                            <td><%= link_to("Click Here", server.main_doc) %></td>
                            <td><%= server.main_win %></td>
                        </tr>
                        <% end %>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Javascript

$(document).ready(function() {
        var table = $('#app-list-table').DataTable({
            "scrollX": true

        });
    });

Avíseme si hay algo más que le gustaría que incluyera.