Pause typekit MutationObserver during scrolling #6699
Conversation
.storybook/preview-head.html
Outdated
| async: true | ||
| }, | ||
| h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use-staging.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) | ||
| })(document); |
There was a problem hiding this comment.
This is using a staging typekit build for testing. Will revert before merging.
| @@ -102,6 +102,8 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | |||
| state.isScrolling = true; | |||
| setScrolling(true); | |||
|
|
|||
| // Pause typekit MutationObserver during scrolling. | |||
| window.dispatchEvent(new Event('tk.disconnect-observer')); | |||
There was a problem hiding this comment.
Do we want to move this to a Spectrum-only location? We would currently need to copy it into several places in both v3 and s2, and any custom components people build with virtualizer would also need it. Not sure if there's really much harm for it being there outside Adobe too?
There was a problem hiding this comment.
I think it is fine keeping it here, like you said I don't think firing this event even for non-spectrum virtualizer experiences is a problem. This event is specific to our typekit right?
There was a problem hiding this comment.
it would affect any typekit even ones used by third parties, which is probably a good thing
There was a problem hiding this comment.
Agreed, better to have it included for non-spectrum typekits and also non-spectrum virtualizer setups.
We could do a check for a typekit on load, but I don't think it would make much of a difference.
| @@ -102,6 +102,8 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | |||
| state.isScrolling = true; | |||
| setScrolling(true); | |||
|
|
|||
| // Pause typekit MutationObserver during scrolling. | |||
| window.dispatchEvent(new Event('tk.disconnect-observer')); | |||
There was a problem hiding this comment.
I think it is fine keeping it here, like you said I don't think firing this event even for non-spectrum virtualizer experiences is a problem. This event is specific to our typekit right?
| validRect: rect | ||
| children: [], | ||
| validRect: rect, | ||
| node |
There was a problem hiding this comment.
Should we update interface LayoutNode to require node and children?
There was a problem hiding this comment.
I tried that before but there are some that don't have associated nodes (the loader and empty state in RSP).
|
## API Changes
unknown top level export { type: 'any' } |
First commit pauses the TypeKit MutationObserver while Virtualizer is scrolling so that it isn't constantly updating due to DOM nodes being added/removed/reused. After scrolling, it is resumed so that the dynamic subsetting needed for CJK fonts updates properly.
Second commit is a couple other minor performance improvements I noticed while testing it. Mainly keeping object shape the same (rather than adding
nodelater) and breaking out of loop early while building a table row outside the requested rect.