Button with spinner get cut in half

Question

I have a table where inside a column, I have a button. When pushing that button, I activate the spinner "loading state". I keep that state in memory, so if I move around to other pages and come back, I can get the state and apply it to that button

The spinner and the look of the button are ok when I start the spinner, but if I change page and comes back, the button still has the spinner, but it is cut in half

Before

After

The html looks like this:

<table class="table">
  <thead>
    <tr>
      <th class="left">Name</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="left">The item name</td>
      <td>
        <button [clrLoading]="stoppingState" type="button" class="btn btn-icon btn-outline" (click)="stopBroadcasting()">
          <clr-icon shape="stop"></clr-icon>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Thanks in advance

Answer 1

Here is whats happening. In your example, when you set the value for the ClrLoadingButton state the view for the loading button is not fully initialized and the icon for the spinner is not in the DOM. There is a method, ClrLoadingButton.setExplicitButtonWidth, that runs when loading state is changed and it calculates the button width. Since the loading spinner isn't in the DOM at that time it calculates the wrong width.

I moved the code that accesses your service and sets the stoppingState into ngAfterViewInit and it works as I would expect.

ngAfterViewInit() {
    this.stoppingState = this.myService.getStopState();
}

Here is a link to the modified StackBlitz: https://stackblitz.com/edit/clarity-light-theme-v012-3xmqmh