fix(web): Speed up load on data sets that contain thousands of images per day

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

@@ -148,6 +148,7 @@ export class DayGroup {
     // TODO: lazily get positions instead of loading them all here
     for (let i = 0; i < this.viewerAssets.length; i++) {
       this.viewerAssets[i].position = geometry.getPosition(i);
+      this.viewerAssets[i].updateIntersecting();
     }
   }
 

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

@@ -21,6 +21,7 @@ export function updateIntersectionMonthGroup(timelineManager: TimelineManager, m
   month.actuallyIntersecting = actuallyIntersecting;
   if (preIntersecting || actuallyIntersecting) {
     timelineManager.clearDeferredLayout(month);
+    month.updateAllViewerAssetIntersections();
   }
 }
 

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

@@ -377,4 +377,11 @@ export class MonthGroup {
   cancel() {
     this.loader?.cancel();
   }
+  updateAllViewerAssetIntersections() {
+    for (const dayGroup of this.dayGroups) {
+      for (const viewerAsset of dayGroup.viewerAssets) {
+        viewerAsset.updateIntersecting();
+      }
+    }
+  }
 }

web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts

@@ -7,23 +7,29 @@ import type { TimelineAsset } from './types';
 export class ViewerAsset {
   readonly #group: DayGroup;
 
-  intersecting = $derived.by(() => {
+  intersecting = $state(false);
+
+  updateIntersecting() {
     if (!this.position) {
-      return false;
+      this.intersecting = false;
+      return;
     }
 
     const store = this.#group.monthGroup.timelineManager;
     const positionTop = this.#group.absoluteDayGroupTop + this.position.top;
 
-    return calculateViewerAssetIntersecting(store, positionTop, this.position.height);
-  });
+    this.intersecting = calculateViewerAssetIntersecting(store, positionTop, this.position.height);
+  }
 
   position: CommonPosition | undefined = $state.raw();
   asset: TimelineAsset = <TimelineAsset>$state();
   id: string = $derived(this.asset.id);
+  // asset: TimelineAsset;
+  // id: string;
 
   constructor(group: DayGroup, asset: TimelineAsset) {
     this.#group = group;
     this.asset = asset;
+    // this.id = asset.id;
   }
 }