Ionic detached elements held by a KeyframeEffect

I have a page inside an Ionic Angular app which looks something like this:


@Component({
selector: 'app-pages',
templateUrl: './pages.component.html',
styleUrls: ['./pages.component.scss'],
standalone: true,
imports: [IonFabButton, IonIcon, IonFab, NavbarComponent, PageWrapperComponent, ButtonComponent, EntityCardComponent, RouterLink]
})
export class PagesComponent implements ViewWillEnter, ViewDidLeave {
loading = signal(false);

ionViewWillEnter() {
this.loadPages();
}

ionViewDidLeave() {
this.entities.set([]);
}

async loadPages() {
this.loading.set(true);
const { data, error } = await this.supabaseService.supabase.from('entity').select('*');
this.loading.set(false);
if (error) {
this.toastService.error("There was an error loading you pages.");
} else {
this.entities.set(data!);
}
}
}



When navigating away from this page, the DOM nodes count goes up, and when coming back, the the DOM nodes grow even more.



Upon checking the memory tab I came across many many detached elements that seem to be referenced either by KeyframeEffect or CSSTransition.



Does anyone have a clue what can cause this issue?

Ionic version 8.5.5, Angular version 18.0.0

Continue reading...