How can I add a loading gif while my nw.js application reads a csv file?

When I trigger a click event, my nw.js app starts processing an array of data previously read from a CSV file. Often this takes some time and the page freezes. I want to add a loadingGif to prevent the user to think the app crashed.

Here is the click event (using JQuery).

$("#submitBtn").click({dataArr}, function(event){

    // erases the content of <tbody>
    emptyBody()

    // take the inputs from the user
    let activeFilters = createActiveFilters()

    // use the inputs to filter through a csv file
    let filteredReportsList = filterLines(activeFilters, dataArr)

    // show the results inside <tbody>
    showFilteredLines(filteredReportsList)

    // apply zebra rows
    zebraRows()

});

1 - I tried to use a function to add the image before the processing part, and another function to remove it **after the processing **. The page freezes and only returns when all the processing is done. So adding or removing the image is useless.

2 - I tried using async functions and it didn't work neither.

// async function
let searchReports = async (dataArr) => {
    let activeFilters = await createActiveFilters()
    let filteredReportsList = await filterLines(activeFilters, dataArr)

    return filteredReportsList
}

// click event
$("#submitBtn").click({dataArr}, function(event){

    emptyBody()

    addLoadingGif()

    searchReports(dataArr).then(filteredReportsList => {

        removeLoadingGif()

        showFilteredLines(filteredReportsList)

        zebraRows()
    })
})

3 - I tried using a CSS animation, instead of a gif image. I successfully change the class, but the animation doesn't show up because the style of the class only changes after the processing.

I don't know what else to do. I appreciate any help! :)`

Edit1:

Here is addLoadingGif

function addLoadingGif () {
    $('.loadingGif').addClass('loadingGif--on')
}

Edit2: To make this easier I created gists for the template HTML and javascript files I'm using. But it's documented in pt-br, sorry.

Template HTML from my nw.js app https://gist.github.com/Titowisk/b73cd303d8fb7a7b0d5bd9cd1514c891

Javascript file from my nw.js app https://gist.github.com/Titowisk/18a0d02a04b624f7c855f1bd82147913

Edit3: added the third try above.

Solution

So, I took an JQuery Ajax course and applied to my problem and it worked!!

I used a $.get() function. Before calling it I toggle the visibility of my css loading animation and after $.get is done, I toggle again the visibility of my css loading animation.

Here's the code

$('#submitBtn').click({dataArr, reportsType}, (e) => {

    emptyBody()

    // show gif
    $('.donutSpinner').toggle()

    let activeFilters = createActiveFilters()

    $.get(`../../assets/csv/${fileName}`, (rawCsv) => {

        // I transfered the csv processing inside the get callback
        dataArr = processRawCsv(rawCsv)

        let filteredReportsList = filterLines(activeFilters, dataArr)

        showFilteredLines(filteredReportsList, reportsType)
        // -------------------------------------------------------
    })
    .fail(() => {
        console.log('falhou!')
    })
    .always(() => {

        // hide gif
        $('.donutSpinner').toggle()

        zebraRows()
    })
})