resource.set({});
resources.reload();
resource.set(undefined); // cancels the reload


resource.set(undefined);
resources.reload();
resource.set(undefined); // does not cancel the reload

import {Component, resource, ResourceStatus} from '@angular/core';
import {JsonPipe} from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [JsonPipe],
  template: `
    <p>
      @if (something.value()) {
        {{something.value() | json}}
      } @else if (something.isLoading()) {
        Loading...
      } @else {
        Load it?
      }
    </p>
    @if (something.isLoading()) {
      <p><button type="button" (click)="cancelIt()">Cancel it</button></p>
    } @else {
      <p><button type="button" (click)="loadIt()">Load it</button></p>
    }
  `
})
export class AppComponent {
  readonly something = resource({
    loader: async ({previous, abortSignal}) => {
      if (previous.status === ResourceStatus.Idle) {
        return undefined;
      }
      return await someLongRunningTask(abortSignal);
    }
  });

  loadIt() {
    this.something.reload();
  }

  cancelIt() {
    // Setting a value after reload is called that is the same as the value
    // which was set before reload was called does not cancel the reload action
    this.something.set(undefined);

    // whereas setting a different value to the previous one always aborts in-progress reload operations
    // this.something.set({});
  }
}

function someLongRunningTask(abortSignal: AbortSignal) {
  return new Promise<unknown>((resolve, reject) => {
    if (abortSignal.aborted) {
      reject(abortSignal.reason);
      return;
    }

    let timeout: number | undefined = undefined;
    const abort = () => {
      clearTimeout(timeout);
      reject(abortSignal.reason);
    };
    abortSignal.addEventListener('abort', abort);
    timeout = setTimeout(() => {
      abortSignal.removeEventListener('abort', abort);
      resolve({success: true});
    }, 2_000)
  })
}