<div class="thumbnail" [class.limit-width]="limitWidth">
  @if (isLoading()) {
  <div class="thumbnail-content outer">
    <div class="inner">
      <div class="centered">
        <ds-loading [spinner]="true"></ds-loading>
      </div>
    </div>
  </div>
  }
  <!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing -->
  @if (src() !== null) {
  <img
    class="thumbnail-content img-fluid"
    [ngClass]="{ 'd-none': isLoading ()}"
         [src]="src() | dsSafeUrl"
         [alt]="alt | translate"
         (error)="errorHandler()"
         (load)="successHandler()"
  />
  } @if (src() === null && isLoading() === false) {
  <div class="thumbnail-content outer">
    <div class="inner">
      <div class="thumbnail-placeholder centered">
        {{ placeholder | translate }}
      </div>
    </div>
  </div>
  }
</div>
