Не пойму почему двигается border SCSS?

В общем есть кнопка загрузка , при клике не нее происходит загрузка ( анимация ) и потом возвращается в обычную кнопку зеленую. Суть в том что при загрузке border крутится но его чуть чуть кидает то вверх то вниз, в центр мне надо вставить circle то он тоже шевелится, на месте не стоит.

HTML

<div class="container">
    <button [disabled]="authForm.invalid" #button></button>
</div>

SCSS

$primary-body-color: rgb(21, 20, 25); // background color
$border-color: rgb(86, 85, 90); // border color
$primary-text-input-color: rgb(126, 125, 133); // text color auth page
$primary-text-title: rgb(231, 229, 234); // title & reset color
$primary-green: #3F9F88; // green color
$primary-fonts: "Open Sas", sans-serif; // font
$primary-first-btn-color: linear-gradient(7deg, #534b82 30%, #6f437d 70%); // basic-button gradient


button {
  width: 20.9vh;
  position: relative;
  height: 3vh;
  border-radius: 3vh;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  background: $primary-first-btn-color;
  color: $primary-text-title;
  font:{
    size: 1.2vh;
    weight: 400;
    family: $primary-fonts;
  }
  &:hover {
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
  }
  &:active {
  }
  &:after {
    content:"Login";
  }
}

.onClick {
  width: 3vh;
  border: 0.3vh solid #2f2f2f;
  border-bottom: 0.3vh solid #3F9F88;
  animation: rotating 1s 0.25s linear infinite;
  background: transparent;
  &:after {
    display: none;
    //content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='19' width='19'><path d='M9.875,0.625C4.697,0.625,0.5,4.822,0.5,10s4.197,9.375,9.375,9.375S19.25,15.178,19.25,10S15.053,0.625,9.875,0.625' fill='blue' /></svg>");
  }
  &:hover {
    cursor: not-allowed;
    box-shadow: none;
  }
}

.validate {
  font-size: 1vh;
  color: white;
  background: $primary-green;
  &:after {
    content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z' fill='white' /></svg>");
  }
  &:hover {
    cursor: not-allowed;
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

TS

export class BasicButtonComponent implements  AfterViewInit {

  @Input() authForm!: FormGroup;

  @ViewChild('button') btn!: ElementRef;

  constructor() { }

  ngAfterViewInit(): void {
    this.onClick()
  }

  onClick() {
    if(this.btn) {
      this.btn.nativeElement.addEventListener('click', () => {
        this.btn.nativeElement.classList.add("onClick", 250, this.validate())
      })
    }
  }

  validate() {
    setTimeout(() => {
      this.btn.nativeElement.classList.remove("onClick");
      this.btn.nativeElement.classList.add("validate", 850, this.callback())
    }, 3000)
  }

  callback() {
    setTimeout(() => {
      this.btn.nativeElement.classList.remove("validate")
    }, 2500)
  }
}

Видео

https://www.veed.io/view/8ddf0f82-16e0-4ea8-a523-cccd0336e287?panel=share

В песочнице так же если присмотрется то есть движение

https://codepen.io/Innerbloom/pen/wvxjaWL