-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it would affect any typekit even ones used by third parties, which is probably a good thing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Verified the performance improvement and didn't notice any problems arising in the TableView/ListBox from the other changes
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we update interface LayoutNode
to require node and children?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
node
later) and breaking out of loop early while building a table row outside the requested rect.