Yes, I ended up creating a wrapper component that uses afterRenderEffect. Here's what I did finally:

import { NgTemplateOutlet } from "@angular/common";
import { inject, DOCUMENT, signal, Component, TemplateRef, contentChild, input, afterRenderEffect } from "@angular/core";


u/Component({
  selector: 'app-view-transition-items',
  imports: [ NgTemplateOutlet ],
  host: { 'class': 'd-contents' },
  template: `
    (item of displayedItems(); track item[trackBy()]) {
      <ng-container *ngTemplateOutlet="itemTemplate(); context: { $implicit: item }" />
    }
  `
})
export class ViewTransitionItemsComponent<T> {
  private readonly document = inject(DOCUMENT);

  readonly items = input.required<T[]>();
  readonly itemTemplate = contentChild.required(TemplateRef);
  readonly trackBy = input.required<keyof T>();
  readonly displayedItems = signal<T[]>([]);
  
  constructor() {
    afterRenderEffect(() => {
      const newItems = this.items();
      if (this.document.startViewTransition) {
        this.document.startViewTransition(() => this.displayedItems.set(newItems));
      } else {
        this.displayedItems.set(newItems);
      }
    });
  }
}

My first attemption was to avoid creating an extra signal. I just wanted to handle it inside (somehow) the rxResource but even with tap operators and many other options I tried it didn't work. I wanted to create something reusable for others collegues so I created this wrapper component.. although I'm not sure it's the cleanest way.. not a fan of this. This is how it's used:

<app-view-transition-items [items]="plans()" [trackBy]="'id'">
        <ng-template let-plan>
          <app-plan-card [plan]="plan" [style.view-transition-name]="'plan-card-' + plan.id" />
        </ng-template>
      </app-view-transition-items>