fix(design-system): useIsVisible observer look-ahead - #3210
Conversation
| root, | ||
| mode = 'show', | ||
| rootMargin = '100px', | ||
| rootMargin = '100% 0%', |
There was a problem hiding this comment.
| rootMargin = '100% 0%', | |
| rootMargin = '100% 0', |
css 0 values typically don't hold a unit
There was a problem hiding this comment.
No this doesn't work here. It's not a css value, it's an option of the IntersectionObserver.
|
|
||
| const observerTarget = useTemplateRef<InstanceType<typeof OcCard>>('observerTarget') | ||
| const observerTargetElement = computed<HTMLElement>(() => unref(observerTarget)?.$el) | ||
| const scrollContainer = useFilesViewScrollContainer() |
There was a problem hiding this comment.
oh wait, why don't you pass down the scrollcontainer from the ResourceTiles component like you did with the table?
There was a problem hiding this comment.
It needs to be passed to useIsVisible, not to the component. The problem with the table is that useIsVisible lives deep inside the trs, hence we need to pass it down further in that case.
|
|
||
| export const useIsVisible = ({ | ||
| target, | ||
| root, |
There was a problem hiding this comment.
strictly speaking, since root is required this is a breaking change for the design-system
There was a problem hiding this comment.
Good thing that a major release is around the corner 🤓
12d3b55 to
a4ad393
Compare
Fixes the look-ahead of the useIsVisible composable by passing it the parent scroll container as root property and creating the observer lazily to ensure the target element is mounted. Breaking for devs: the root property on useIsVisible is mandatory now.
a4ad393 to
948d611
Compare
…head fix(design-system): useIsVisible observer look-ahead
Fixes the look-ahead of the
useIsVisiblecomposable by passing it the parent scroll container asrootproperty and creating the observer lazily to ensure the target element is mounted.You can test this by adjusting your browser window size so it fits e.g. 15 tiles in the file list. Now open a folder with >30 images and look at the network tab. It should load ~30 thumbnails because of the fixed look-ahead, which is now about one viewport.
Breaking for devs
The
rootprop of theuseIsVisiblecomposable is mandatory now.fixes #3168