I have a datatable with two buttons excel and cs export.
Because of large amount of data the exporting process takes a bit of time I want to show a loadingSpinner when the button is clicked.
I read other questions and tried this:

ngOnInit(): void {
    //configuring the settings for the datatable
    this.createDataTable();
    $('#myDataTable').DataTable().on('buttons-processing', function ( e, indicator ){

      if(indicator){
        $('#exportSpinner').show();
      } else {
        $('#exportSpinner').hide();
      }

    });
  }

This unfortunately only shows the spinner when the export process started, this is a bit late because I want that to start spinning immediately when button is clicked.
Also that only works for the excel button and not the csv button, when clicking the csv export no spinner shows... don't know why.

So I came up with this:

buttons: {
        buttons: [
          { 
            extend: 'excel', 
            className: 'btn btn-outline-success mb-3',
          },
          { 
            extend: 'csv', 
            className: 'btn btn-outline-success mb-3 me-3',
            action: function(e, dt, button, config){
             //call the spinner here
              $.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config);
            }
          }
        ],
        dom: {
          button: {
            className: 'btn'
          }
        }
      },

Now I get this error:

Property 'buttons' does not exist on type 'ExtSettings'

Also there is no

excelHtml5.action.call()

excel action call if I want to use that, just "csvHTML5" and "collection"

I think I included all the scripts and files I need in my angular.json:

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css",
              "node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css",
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
              "node_modules/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.min.js",
              "node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js",

              "node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",

              "node_modules/jszip/dist/jszip.js",
              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "node_modules/datatables.net-buttons/js/buttons.flash.js",
              "node_modules/datatables.net-buttons/js/buttons.html5.js",
              "node_modules/datatables.net-buttons/js/buttons.print.js"
            ]

Can someone help?
Basically I want to show the exportSpinner when either of the buttons is clicked.
Immediatley when clicking the button and not just when the export process starts.