How to handle the delay between the drag leave and actual drop event in Angular

<div dragDrop class="container" (fileDropped)= "fileDropped >

<kendo-grid [data]="gridData"></kendo-grid>

</div>

“container” occupies entire page. When a file from explorer dragged and dropped in the container area fileDropped method will populate. I have some functionality in the fileDropped method.

dragDrop is directive.

import {
  Directive,
  Output,
  EventEmitter,
  HostBinding,
  HostListener,
  Input
} from '@angular/core';
@Directive({
  selector: '[DragDrop]'
})
export class DragDropDirective {
  @Output() fileDropped = new EventEmitter<any>();
  @HostListener('dragenter', ['$event']) onDragStart(evt: any) {
    evt.preventDefault();
    evt.stopPropagation();
  }
 
  // Dragover listener
  @HostListener('dragover', ['$event']) onDragOver(evt: any) {
    evt.preventDefault();
    evt.stopPropagation();
  }
 
  // Dragleave listener
  @HostListener('dragleave', ['$event']) public onDragLeave(evt: any) {
    evt.preventDefault();
    evt.stopPropagation();
  }
   
  // Drop listener
  @HostListener('drop', ['$event']) public ondrop(evt: any) {
    evt.preventDefault();
    evt.stopPropagation();
    let files = evt.dataTransfer.files;
    if (files.length > 0) {
      this.fileDropped.emit(files);
    }
  }
}

Issue - Once a file is dropped , there is delay in firing of fileDropper method. Along with that if the file is dragged for long time on the container and then dropped the delay is more. I want to implement some loader for this delay. But the problem is when to start the loader and when to end ?