JQuery control program execution sequence

Question

I'm trying to display a loader through CSS while JS does some work. The loader is working fine but the program execution is not accurate.

Ideally, the loader should show up when a button is clicked and it should end when JS is done with displaying data. But in my case, it processes the JS functionality first and as soon as it finishes, it displays the loader.

Code shared below

$(".sebtn").on("click",function(){

    // LOADER SHOW
    $("#loader").css({
        display: "inline-block",
        visibility: "visible"
      });

    // JS FUNCTIONALITY
    rdNetworkLyr.eachLayer(function (layer) {
        layer.setStyle({color:'#F2F3F5'});
        for (const key in se_am.XDSegID){
            if(se_am.XDSegID.hasOwnProperty(key)){
                if(layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'A'){
                    layer.setStyle({color:'#060'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'B'){
                    layer.setStyle({color:'#9f0'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'C'){
                    layer.setStyle({color:'#ff3'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'D'){
                    layer.setStyle({color:'#f90'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'E'){
                    layer.setStyle({color:'#f60'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'F'){
                    layer.setStyle({color:'#c00'})
                }
            }
        }
        });

    // LOADER HIDE
    $("#loader").css({
        display: "none",
        visibility: "hidden"
      });

    });