Rxjs debounceTime on Subject creates delay instead of debounce

Question

I am trying to create the Subject that would start the animation on click of the button, i dont wont users to be able to call it when the last animation has not finished yet.

    construcotor(...){
    this.shuffleBackwardAnimationSubject = new Subject();
    }
     ngAfterViewInit(): void {
            this.shuffleForwardAnimationSubject
                .debounceTime(shuffleAnimationTime)
                .subscribe(
                    () => {
                        let products = this.getNextProducts();
                        this.orientation = 'forward';
                        this.cardsGroups.shift();
                        this.cardsGroups.push(products);
                    },
                    (error) => {
                        console.log(error);
                    });
        }
                    <img id="right-scroller"
                         class="scroller"
                         (click)="shuffleForwardAnimationSubject.next()"
                         [src]="rightChevronUrl"/>

My problem is that, not only it prevents new animations from starting, but also creates the delay when no animation is running.