feat: timeline performance (#16446)

* Squash - feature complete

* remove need to init assetstore

* More optimizations. No need to init. Fix tests

* lint

* add missing selector for e2e

* e2e selectors again

* Update: fully reactive store, some transitions, bugfixes

* merge fallout

* Test fallout

* safari quirk

* security

* lint

* lint

* Bug fixes

* lint/format

* accidental commit

* lock

* null check, more throttle

* revert long duration

* Fix intersection bounds

* Fix bugs in intersection calculation

* lint, tweak scrubber ui a tiny bit

* bugfix - deselecting asset doesnt work

* fix not loading bucket, scroll off-by-1 error, jsdoc, naming

web/src/lib/actions/intersection-observer.ts

@@ -13,6 +13,7 @@ type OnIntersectCallback = (entryOrElement: IntersectionObserverEntry | HTMLElem
 type OnSeparateCallback = (element: HTMLElement) => unknown;
 type IntersectionObserverActionProperties = {
   key?: string;
+  disabled?: boolean;
   /** Function to execute when the element leaves the viewport */
   onSeparate?: OnSeparateCallback;
   /** Function to execute when the element enters the viewport */
@@ -83,8 +84,15 @@ const observe = (key: HTMLElement | string, target: HTMLElement, properties: Int
 };
 
 function configure(key: HTMLElement | string, element: HTMLElement, properties: IntersectionObserverActionProperties) {
-  elementToConfig.set(key, properties);
-  observe(key, element, properties);
+  if (properties.disabled) {
+    const config = elementToConfig.get(key);
+    const { observer } = config || {};
+    observer?.unobserve(element);
+    elementToConfig.delete(key);
+  } else {
+    elementToConfig.set(key, properties);
+    observe(key, element, properties);
+  }
 }
 
 function _intersectionObserver(

web/src/lib/actions/resize-observer.ts

@@ -1,4 +1,4 @@
-type OnResizeCallback = (resizeEvent: { target: HTMLElement; width: number; height: number }) => void;
+export type OnResizeCallback = (resizeEvent: { target: HTMLElement; width: number; height: number }) => void;
 
 let observer: ResizeObserver;
 let callbacks: WeakMap<HTMLElement, OnResizeCallback>;