locked
How to add loading spinner to a slow loading page? RRS feed

  • Question

  • User-1104215994 posted

    Hi,

    I have a .net core <g class="gr_ gr_46 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="46" data-gr-id="46">mvc</g> application. In one of my controller <g class="gr_ gr_75 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="75" data-gr-id="75">action</g> I am getting data from database and display it on datatables.js. The problem is <g class="gr_ gr_209 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="209" data-gr-id="209">datatables</g> renders after 2-3 seconds. Is there a way to put <g class="gr_ gr_333 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="333" data-gr-id="333">spinner</g> on the page in order to inform <g class="gr_ gr_416 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="416" data-gr-id="416">client</g> that page is not fully ready?

    Here is my <g class="gr_ gr_493 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="493" data-gr-id="493">cshtml</g>:

    @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);
            }

    Wednesday, September 11, 2019 12:24 PM

All replies

  • Monday, September 16, 2019 8:28 AM
  • User-1104215994 posted

    But I am not using server-side processing.

    Monday, September 16, 2019 11:15 AM
  • User-821857111 posted

    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. 

    Monday, September 16, 2019 11:35 AM