hi team,

am trying to add the loader icon in dashboard report and here is the code

<?php

namespace hamaracrm\Business\unitgtreport;

use \hamaracrm\automaker;

use koolreport\dashboard\inputs\Button; 
use koolreport\dashboard\notifications\Confirm; 
use koolreport\dashboard\notifications\Alert;

class unitgtdataget extends Button
{
    protected function actionSubmit($request, $response) 
    {
		
        $brnch = '$("#unitgtbranchfilter").val()';
        $yearname = '$("#unitgtyearfilter").val()';
        $selectedMonths = '$("#unitgtmonthfilter").val()';
		
		
         //print_r($selectedMonths);
        $jsCode = "
            var brnch = $brnch;
            var yearname = $yearname;
            var selectedMonths = $selectedMonths;
            
            if (selectedMonths.length === 1) {
                var monthid = selectedMonths[0];
                
                $.ajax({
                    type: 'POST',
                    url: 'ajax/gtdataget.php',
                    async: false,
                    data: { brnch: brnch, yearname: yearname, monthid: monthid },
                    success: function(data) {
                        alert('Data Inserted');
                    }
                });
            } else {
                alert('Please select a single month only.');
                return false; // Prevent the confirmation message from showing
            }
        ";
		

        return Confirm::info("Get Data Confirmation")
			->confirmButtonText("I am sure")
                        ->onConfirm($jsCode);
    }
}

and am trying to add the loader after the AJAX call has been initiated but before it completes, to indicate that data is being fetched show loader and hide after load data fetched all

after hit the "I am sure" button working fine, but am trying to add a loader gif icon after the AJAX call has been initiated but before it completes, to indicate that data is being fetched, show loader and hide after load data fetched all