fix(web): fix lost scrollpos on deep link to timeline asset, scrub stop

[midzelis]

Description

This fixes the problems in maintaining scroll position (i.e. to a given deep-linked bucket) as the buckets above the current bucket as loaded and change height. The same problem also happened when clicking on the scrub bar on an unloaded part of the timeline (towards the bottom).

The root causes:

1. the id='bucket' was changed to a bucket class instead, causing _updateLastIntersectedBucketDate to fail
2. _updateLastIntersectedBucketDate was not working properly anyways, since on scrub, the scrubbar creates an invisible overlay over the entire #asset-grid causing getElementAtPoint to fail.
3. The above was replaced with an alternative method to find the last 'intersected' bucket in the asset-grid by using an intersection observer.
4. Bucket-height event was not sent on initial layout of bucket
5. use the measuring component as a skeleton (in later PR drop skeleton component completely)

Other changes

• Asset-store isn't a store anymore - needed to rename asset.store.ts to asset-store.svelte.ts - the store.svelte.ts pattern caused problems with the compiler, so using hyphen instead. Using .svelete.ts so that you can use $state in non-components.

How Has This Been Tested?

• Existing tests pass, needed to disable one due to wasm layout
• Manual testing

[github-actions]

Deploying preview environment to https://pr-16305.preview.internal.immich.cloud/

[mertalev]

There's still the issue where the wasm library can't be imported on Webkit because it uses top-level await. The approach of importing in the asset store constructor is too racy. Is there a good way to do a dynamic import without needing to make the geometry update etc. async?

[mertalev]

Wouldn't it be better to not provide a function instead?

[midzelis]

There's still the issue where the wasm library can't be imported on Webkit because it uses top-level await. The approach of importing in the asset store constructor is too racy. Is there a good way to do a dynamic import without needing to make the geometry update etc. async?

In this version, the geometry update is not async. the import is in the init() method. I could move it the top level instead (without an await) - and then await it in the init() method. That will start loading the import a tiny bit earlier. However, there is no concern of importing the same module multiple times, as ESM will not import the same module if its already imported. Maybe I'm not understanding the workaround?

[mertalev]

This admittedly looks more reliable than #16267. Have you tested the PR with cleared cache and incognito mode? I just want to be sure it isn't relying on the import being instant.

[alextran1502]

Hi Min, amazing work as always on the timeline! I've just finished the first round of testing. I didn't notice that the FPS dropped, so we are golden there. However, I saw two issues.

1. The transition from blurhash > image is really fast, making it feel choppy and not have that mesmerizing fade-in effect anymore. Can it be added back?
2. When on a slow network scenario (I was using a slow 4G thrilling option on Chrome), the loading from blurhahs > image has a flashing effect, like it was re-rendering multiple times.

[midzelis]

Hi Min, amazing work as always on the timeline! I've just finished the first round of testing. I didn't notice that the FPS dropped, so we are golden there. However, I saw two issues.

1. The transition from blurhash > image is really fast, making it feel choppy and not have that mesmerizing fade-in effect anymore. Can it be added back?
2. When on a slow network scenario (I was using a slow 4G thrilling option on Chrome), the loading from blurhahs > image has a flashing effect, like it was re-rendering multiple times.

Some of these were caused by the wasm-layout and wasm-adjacent changes. I just reverted those changes from this PR, so this should now have whats in main, and just the bug fixes for scroll pos. Please give it another test. -- the test deployment seems flaky/stale -- so i would avoid deployment URL for now.