How to add loading spinner to a slow loading page? RSS

• • Reply
  cenk1536

  Member

  527 Points

  2729 Posts

  How to add loading spinner to a slow loading page?

  Sep 11, 2019 12:24 PM|cenk1536|LINK

  Hi,

  I have a .net core mvc application. In one of my controller action I am getting data from database and display it on datatables.js. The problem is datatables renders after 2-3 seconds. Is there a way to put spinner on the page in order to inform client that page is not fully ready?

  Here is my cshtml:

  @model IEnumerable<GameMonitor.Models.GameBanks>
  
  @{
      ViewData["Title"] = "GamesList";
  }
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/r-2.2.2/sc-2.0.0/sl-1.3.0/datatables.min.css" />
  <h2>Game List</h2>
  
  <table class="table hover" id="test">
      <thead>
          <tr>
  
              <th>
                  @Html.DisplayNameFor(model => model.ProductCode)
              </th>
              <th>
                  @Html.DisplayNameFor(model => model.RequestDateTime)
              </th>
  
              <th>
                  @Html.DisplayNameFor(model => model.Used)
              </th>
              <th>
                  @Html.DisplayNameFor(model => model.ProductDescription)
              </th>
  
              <th>
                  @Html.DisplayNameFor(model => model.UnitPrice)
              </th>
              <th>
                  @Html.DisplayNameFor(model => model.TotalPrice)
              </th>
  
              <th>
                  @Html.DisplayNameFor(model => model.EstimateUnitPrice)
              </th>
  
              <th>
                  @Html.DisplayNameFor(model => model.Status)
              </th>
              <th></th>
          </tr>
      </thead>
      <tbody>
          @foreach (var item in Model)
          {
              <tr>
  
                  <td>
                      @Html.DisplayFor(modelItem => item.ProductCode)
                  </td>
  
                  <td>
                      @Html.DisplayFor(modelItem => item.RequestDateTime)
                  </td>
  
                  <td>
                      @Html.DisplayFor(modelItem => item.Used)
                  </td>
                  <td>
                      @Html.DisplayFor(modelItem => item.ProductDescription)
                  </td>
  
                  <td>
                      @Html.DisplayFor(modelItem => item.UnitPrice)
                  </td>
                  <td>
                      @Html.DisplayFor(modelItem => item.TotalPrice)
                  </td>
  
                  <td>
                      @Html.DisplayFor(modelItem => item.EstimateUnitPrice)
                  </td>
  
                  <td>
                      @Html.DisplayFor(modelItem => item.Status)
                  </td>
                  <td>
  
                      <a asp-action="Details" asp-route-id="@item.GameBankId">Details</a>
  
                  </td>
              </tr>
          }
  
      </tbody>
  
  </table>
  <div>
      <a asp-action="Index">Back to List</a>
  </div>
  @section scripts {
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/r-2.2.2/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
      <script>
          $(document).ready(function () {
              $('#test').DataTable({
                  dom: 'Bfrtip',
                  columnDefs: [
                      {
                          targets: 8,
                          className: 'noVis'
                      }
                  ],
                  buttons: [
  
                      {
                          extend: 'excelHtml5',
                          exportOptions: {
                              columns: [0, 1, 2, 3,4,5,6,7]
                          }
                      },
                      {
                          extend: 'pdfHtml5',
                          exportOptions: {
                              columns: [0, 1, 2, 3,4,5,6,7]
                          }
                      },
                      {
                          extend: 'colvis',
                          columns: ':not(.noVis)'
                      }
                  ],
                  "pageLength": 25
                  
              });
          });
      </script>
  }
  

  Here is my controller action:

  [Authorize]
          // GET: GameBanks
          public async Task<IActionResult> GamesList(string productCode)
          {
              if (productCode == null)
              {
                  return NotFound();
              }
              
              var gameBanks = await _context.GameBanks.Where(m => m.ProductCode == productCode).ToListAsync();
  
             
              if (gameBanks == null)
              {
                  return NotFound();
              }
  
              return View(gameBanks);
          }

  Keep your friends close and your enemies even closer
• • Reply
  Mikesdotnett...

  All-Star

  194524 Points

  28081 Posts

  Moderator

  Re: How to add loading spinner to a slow loading page?

  Sep 16, 2019 08:28 AM|Mikesdotnetting|LINK

  It seems that the feature is built in: https://datatables.net/forums/discussion/41654/how-to-display-a-progress-indicator-for-serverside-processing

  ASP.NET Tutorials | Learn Entity Framework Core | Learn Razor Pages | Learn Dapper
• • Reply
  cenk1536

  Member

  527 Points

  2729 Posts

  Re: How to add loading spinner to a slow loading page?

  Sep 16, 2019 11:15 AM|cenk1536|LINK

  But I am not using server-side processing.

  Keep your friends close and your enemies even closer
• • Reply
  Mikesdotnett...

  All-Star

  194524 Points

  28081 Posts

  Moderator

  Re: How to add loading spinner to a slow loading page?

  Sep 16, 2019 11:35 AM|Mikesdotnetting|LINK

  That probably explains why it takes a while. You are generating HTML on the server, sending it to the client, and then getting DataTables to re-render it. It also appears that you are not paging the data on the server. You seem to be getting all data, and then using Datatables to filter it to only show 25 rows? If that is the case, the browser initially renders every row of data. That takes time. Depending on how many rows of data the view initially returns, it could take a lot of time.

  Perhaps you should test getting the data as JSON from the server using an AJAX call, and doing the paging on the server. 

  ASP.NET Tutorials | Learn Entity Framework Core | Learn Razor Pages | Learn Dapper