Prevent DOM recreations in for loops by defining properties to track by

src/app/components/items/event-page.component.ts

@@ -15,7 +15,7 @@ import {Photo} from "../../api/types/photos/photo";
 ],
   template: `
     <div class="flex flex-col gap-y-2.5">
-      @for (event of page.events; track event) {
+      @for (event of page.events; track event.eventId) {
         <app-event [event]="event" [submittingUser]="user(event.userId)!"
           [user]="user(event.storedObjectId)"
           [level]="level(event.storedSequentialId)"

src/app/components/items/room.component.ts

@@ -31,7 +31,7 @@ import {PlatformPipe} from "../../pipes/platform.pipe";
       </span>
     </b>
     <ul class="list-disc list-inside">
-      @for (player of room.playerIds; track player) {
+      @for (player of room.playerIds; track player.username) {
         <div>
           @if (!player.userId) {
             <li>

src/app/components/ui/header/header.component.ts

@@ -61,14 +61,14 @@ class VerticalDividerComponent {}
     
       <header-vertical-divider></header-vertical-divider>
       <nav class="flex gap-x-5 h-[60px] items-center">
-        @for (category of navTree; track category) {
+        @for (category of navTree; track category.name) {
           <app-navbar-category [category]="category"></app-navbar-category>
         }
       </nav>
       <div class="grow"></div>
       <nav class="flex gap-x-4 items-center">
         <app-search></app-search>
-        @for (category of rightNavTree; track category) {
+        @for (category of rightNavTree; track category.name) {
           <app-navbar-category [category]="category" [showNames]="false" [right]="true"></app-navbar-category>
         }
     

src/app/components/ui/header/navbar-category.component.ts

@@ -25,7 +25,7 @@ import {NavbarItemComponent} from "./navbar-item.component";
       </a>
       <div class="absolute z-[1] w-64 px-5 py-2.5 hidden group-hover:flex flex-col rounded-b bg-header-background gap-y-2"
         [ngClass]="!right ? 'left-0' : 'right-0'">
-        @for (link of category.items; track link) {
+        @for (link of category.items; track link.name) {
           <app-navbar-item [href]="link.route" [icon]="link.icon!" [title]="link.name" [iconClass]="'w-4 text-[1.1rem]'" labelClass="text-lg"></app-navbar-item>
         }
       </div>

src/app/overlays/search.component.ts

@@ -51,7 +51,7 @@ import {ContainerComponent} from "../components/ui/container.component";
           <app-divider></app-divider>
         }
         <div class="flex flex-col gap-y-2">
-          @for (level of results; track level) {
+          @for (level of results; track level.levelId) {
             <app-container>
               <app-level-preview [level]="level"></app-level-preview>
             </app-container>

src/app/pages/categories/categories.component.html

@@ -2,7 +2,7 @@
 <p>Discover and browse through new levels using categories!</p>
 
 <app-responsive-grid>
-  @for (category of categories; track category) {
+  @for (category of categories; track category.apiRoute) {
     <app-level-category [category]="category"></app-level-category>
   }
 </app-responsive-grid>

src/app/pages/contest-listing/contest-listing.component.html

@@ -5,7 +5,7 @@
 </p>
 
 <div class="flex flex-col gap-y-2.5">
-  @for (contest of contests; track contest) {
+  @for (contest of contests; track contest.contestId) {
     <app-container>
       <a [routerLink]="'/contests/' + contest.contestId">
         <app-container-title class="underline">{{ contest.contestTag }}</app-container-title>

src/app/pages/landing/landing.component.html

@@ -15,7 +15,7 @@ <h1>{{this.instance?.instanceName ?? 'Refresh'}}</h1>
 
 @if (instance && instance.announcements.length > 0) {
   <div class="my-5 flex flex-col gap-y-2.5">
-    @for (a of instance.announcements; track a) {
+    @for (a of instance.announcements; track a.announcementId) {
       <app-announcement [data]="a"></app-announcement>
     }
   </div>
@@ -45,7 +45,7 @@ <h1>{{this.instance?.instanceName ?? 'Refresh'}}</h1>
         </p>
       }
       <div class="flex flex-col gap-y-2.5">
-        @for (room of this.rooms | slice:0:7; track room) {
+        @for (room of this.rooms | slice:0:7; track room.roomId) {
           <app-container>
             <app-room [room]="room"></app-room>
           </app-container>

src/app/pages/level-listing/level-listing.component.html

@@ -3,7 +3,7 @@
   <p>{{category.description}}</p>
   @if (levels) {
     <app-responsive-grid>
-      @for (level of this.levels; track level) {
+      @for (level of this.levels; track level.levelId) {
         <app-container [tight]="true">
           <app-level-preview [level]="level"></app-level-preview>
         </app-container>

src/app/pages/photo-listing/photo-listing.component.html

@@ -2,7 +2,7 @@
 
 @if (photos) {
   <app-responsive-grid>
-    @for (photo of this.photos; track photo) {
+    @for (photo of this.photos; track photo.photoId) {
       <app-container [padding]=false>
         <app-photo [photo]="photo" [link]="true"></app-photo>
       </app-container>

src/app/pages/room-listing/room-listing.component.html

@@ -16,7 +16,7 @@
     <app-container>
       <app-container-title>Rooms for {{version | game}}</app-container-title>
       <div class="flex flex-col gap-y-1.5">
-        @for (room of getRoomsForGame(version); track room) {
+        @for (room of getRoomsForGame(version); track room.roomId) {
           <app-dark-container>
             <app-room [room]="room" [showGame]="false"></app-room>
           </app-dark-container>