Angular's ngIf showing else template before evaluating condition

I'm checking if there are any elements in array before showing them. If there aren't, a "not available" message should be displayed.

Class:

public lists = [];
public isLoading: boolean = false;

ngOnInit() {
  this.getLists()
}

getLists() {
  this.isLoading = true;
  this.list.getShoppingLists().subscribe(data => {
    this.isLoading = false;
    this.lists = data.data;
  });
}

Template:

<mat-spinner *ngIf="isLoading" class="mx-auto"></mat-spinner>

<div *ngIf="lists.length > 0; then withLists else withoutLists"></div>

<ng-template #withLists>
  <div *ngFor="let list of lists">
      <p></p>
  </div>
</ng-template>

<ng-template #withoutLists>
 <p>No lists available</p>
</ng-template>

The problem I have is that "not available" message shows in template whilst data is being returned from the API and it shouldn't. Any ideas why this is happening and how should I address this issue?