Don't sort initial load of month from server

web/src/lib/managers/timeline-manager/day-group.svelte.ts

@@ -31,7 +31,9 @@ export class DayGroup {
     this.monthGroup = monthGroup;
     this.day = day;
     this.groupTitle = groupTitle;
-    onCreateDayGroup(this);
+    if (import.meta.env.DEV) {
+      onCreateDayGroup(this);
+    }
   }
 
   get top() {

web/src/lib/managers/timeline-manager/group-insertion-cache.svelte.ts

@@ -1,6 +1,5 @@
 import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
 import { AssetOrder } from '@immich/sdk';
-import { SvelteSet } from 'svelte/reactivity';
 import type { DayGroup } from './day-group.svelte';
 import type { MonthGroup } from './month-group.svelte';
 import type { TimelineAsset } from './types';
@@ -10,8 +9,10 @@ export class GroupInsertionCache {
     [year: number]: { [month: number]: { [day: number]: DayGroup } };
   } = {};
   unprocessedAssets: TimelineAsset[] = [];
-  changedDayGroups = new SvelteSet<DayGroup>();
-  newDayGroups = new SvelteSet<DayGroup>();
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  changedDayGroups = new Set<DayGroup>();
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  newDayGroups = new Set<DayGroup>();
 
   getDayGroup({ year, month, day }: TimelineDate): DayGroup | undefined {
     return this.#lookupCache[year]?.[month]?.[day];
@@ -32,7 +33,8 @@ export class GroupInsertionCache {
   }
 
   get updatedBuckets() {
-    const updated = new SvelteSet<MonthGroup>();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const updated = new Set<MonthGroup>();
     for (const group of this.changedDayGroups) {
       updated.add(group.monthGroup);
     }
@@ -40,7 +42,8 @@ export class GroupInsertionCache {
   }
 
   get bucketsWithNewDayGroups() {
-    const updated = new SvelteSet<MonthGroup>();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const updated = new Set<MonthGroup>();
     for (const group of this.newDayGroups) {
       updated.add(group.monthGroup);
     }

web/src/lib/managers/timeline-manager/internal/load-support.svelte.ts

@@ -43,7 +43,7 @@ export async function loadFromTimeBuckets(
     }
   }
 
-  const unprocessedAssets = monthGroup.addAssets(bucketResponse);
+  const unprocessedAssets = monthGroup.addAssets(bucketResponse, true);
   if (unprocessedAssets.length > 0) {
     console.error(
       `Warning: getTimeBucket API returning assets not in requested month: ${monthGroup.yearMonth.month}, ${JSON.stringify(

web/src/lib/managers/timeline-manager/month-group.svelte.ts

@@ -76,7 +76,9 @@ export class MonthGroup {
     if (loaded) {
       this.isLoaded = true;
     }
-    onCreateMonthGroup(this);
+    if (import.meta.env.DEV) {
+      onCreateMonthGroup(this);
+    }
   }
 
   set intersecting(newValue: boolean) {
@@ -161,7 +163,7 @@ export class MonthGroup {
     };
   }
 
-  addAssets(bucketAssets: TimeBucketAssetResponseDto) {
+  addAssets(bucketAssets: TimeBucketAssetResponseDto, preSorted: boolean) {
     const addContext = new GroupInsertionCache();
     for (let i = 0; i < bucketAssets.id.length; i++) {
       const { localDateTime, fileCreatedAt } = getTimes(
@@ -202,17 +204,17 @@ export class MonthGroup {
       }
       this.addTimelineAsset(timelineAsset, addContext);
     }
+    if (!preSorted) {
+      for (const group of addContext.existingDayGroups) {
+        group.sortAssets(this.#sortOrder);
+      }
 
-    for (const group of addContext.existingDayGroups) {
-      group.sortAssets(this.#sortOrder);
+      if (addContext.newDayGroups.size > 0) {
+        this.sortDayGroups();
+      }
+
+      addContext.sort(this, this.#sortOrder);
     }
-
-    if (addContext.newDayGroups.size > 0) {
-      this.sortDayGroups();
-    }
-
-    addContext.sort(this, this.#sortOrder);
-
     return addContext.unprocessedAssets;
   }