Expected behavior Button on click makes a wave effect.

Actual behavior Button on click dramatically changes in size. It happened suddenly all over the project. I can't remember making any dependecy updates prior to this. Removing wave effect from the button does not help.

Resources (screenshots, code snippets etc.)

html:

<div class="profile">
<div class="row justify-content-center">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <mdb-card>
            <mdb-card-header><h4>@{{username}}</h4></mdb-card-header>
            <mdb-card-body>
                <div class="row">
                    <div class="col-8">
                        <div class="row">
                            ...
                        </div>

                        <div class="row">
                            ...
                        </div>
                    </div>
                    <div class="col-4">
                        <mdb-card>
                            <mdb-card-header><h5>Games</h5></mdb-card-header>
                            <mdb-card-body>
                                <ul class="list-group">
                                    <li *ngFor="let game of games"
                                        class="list-group-item list-group-item-{{game.finished ?
                                                (game.result === '1/2-1/2' ? 'warning' :
                                                    ((game.result === '1-0' && game.whitePlayer.username === username) ||
                                                     (game.result === '0-1' && game.blackPlayer.username === username) ? 'success' : 'danger'))
                                                : 'white'}}">
                                        {{game.whitePlayer.username}} {{game.finished ? game.result : '-'}} {{game.blackPlayer.username}}
                                        <button mdbBtn
                                                type="button"
                                                color="{{game.finished ? 'indigo' : 'dark-green'}}"
                                                class="waves-light btn-sm text-white"
                                                mdbWavesEffect
                                                (click)="test()"
                                        >
                                            {{game.finished ? "Watch" : "Play"}}
                                        </button>
                                    </li>
                                </ul>
                            </mdb-card-body>
                        </mdb-card>
                    </div>
                </div>
            </mdb-card-body>
        </mdb-card>
    </div>
    <div class="col-md-1"></div>
</div>

ts:

import {AfterViewChecked, Component, OnInit, ViewChild} from '@angular/core';
import {AuthService} from "../auth/shared/auth.service";
import {ActivatedRoute} from "@angular/router";
import {UserService} from "../shared/user.service";
import {ChallengeModel} from "../shared/models/challenge-model";
import {GameModel} from "../shared/models/game-model";
import {StatsModel} from "../shared/models/stats-model";
import {GameService} from "../shared/game.service";
import { ChartComponent } from 'angular2-chartjs';

@Component({
  selector: 'app-profile-page',
  templateUrl: './profile-page.component.html',
  styleUrls: ['./profile-page.component.css']
})
export class ProfilePageComponent implements OnInit, AfterViewChecked {

@ViewChild(ChartComponent) chart: ChartComponent;

username: string;
challenges: ChallengeModel[];
games: GameModel[];
stats: StatsModel;
interval: number;

type = 'line';
data = {
    labels: ["", "", ""],
    datasets: [
        {
            label: "Rating history",
            data: [],
            backgroundColor: 'rgb(24,56,175, 0.5)',
            borderColor: 'rgb(24,56,175)',
        }
    ]
};
options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 1450
            }
        }]
    },
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem) {
                return tooltipItem.yLabel;
            }
        }
    }
};

constructor(
    private authService: AuthService,
    private activatedRoute: ActivatedRoute,
    private userService: UserService,
    private gameService: GameService
) { }

ngOnInit(): void {
    this.username = this.authService.getUserName();

    this.loadData(true);

    // this.interval = setInterval(() => {
    //     this.loadData(false);
    // }, 3000);
}

test(): void {
    console.log('test');
}

ngAfterViewChecked() {
    this.chart.chart.update();
}

loadData(makeChart: boolean): void {
    this.userService.getStats().subscribe(data => {
        this.stats = data;

        if (makeChart) {
            this.data.datasets[0].data = JSON.parse(this.stats.eloHistory);
            this.data.labels = JSON.parse(this.stats.eloHistory);
        }
    });

    this.userService.getChallenges().subscribe(data => {
        this.challenges = data;
    });

    this.userService.getGames().subscribe(data => {
        this.games = data;
    });
}

acceptChallenge(challenge: ChallengeModel) {
    this.userService.acceptChallenge(challenge).subscribe(data => {
        window.location.href = 'http://localhost:4200/game/' + data.id;
    });
}

declineChallenge(challenge: ChallengeModel) {

}

analyze(game: GameModel) {
    this.gameService.analyze(game);
}

}

Consecutive fast clicks make button even larger: