0

I have thousands of rows (x and y values) that are returned from a SQL query from an AJAX call. Each row is then plotted on a graph (PlotlyJS) and populates a table on the page. What I'd like to do is , while it's plotting and adding to the table, show a loading animation (made with SVGs and CSS). Problem is the animation is stuck since both elements (table/graph and loading animation) are on the same window and I was reading and trying WebWorker but can only send/receive messages but cannot affect elements within WebWorkers.

Ajax code:

function openReport(reportId) {
    $.ajax({
        url: '/OpenReport',
        type: "GET",
        contentType: "application/json; charset=utf-8;",
        dataType: "json",
        async: false,
        data: { "reportId": reportId },
        success: function(data) {
            showLoader();

            plotGraph(data);
            addToTable(data);

            hideLoader();
        }
    });
}

I've tried implementing the loader into WebWorkers:

onmessage = function(e) {
    plotGraph(e.data);
    addToTable(e.data);        
};

But since the plotting of the graph also needs access to the window, the functions don't even load in. And importing the scripts in, I'd also have to import jQuery which seems like a lot of overhead.

Paul_LayLow
  • 133
  • 1
  • 13

1 Answers1

0

You can use the:

....
beforeSend: function() {
    // setting a loader for body or each element
    $('.body').addClass('loading');
},
....

This will get fired before your data request is send - just like the function name states. here is an example question about this

user3135691
  • 151
  • 8