Skip to content
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

Fix ProgressHex mount blocking render for several seconds #235

Open
wants to merge 2 commits into
base: bundlephobia
Choose a base branch
from

Conversation

mvasigh
Copy link

@mvasigh mvasigh commented Oct 27, 2019

Fixes #234

Seems that ProgressHexAnimator mounts to the anime timeline redundantly in a loop, where a single invocation does the same thing. This brings tl.add() runtime down to 42ms with the same profiler settings, down from 6000ms+

Screen Shot 2019-10-27 at 9 12 06 AM

@pastelsky
Copy link
Owner

Good catch @mvasigh . I've felt the slowdown in response times as well after having added this. However, removing this loop changes the animation –

Before
after

After
before

We'll need a different way to solve this. Maybe instead of queuing up 50 iterations upfront, its best to add the next iteration in the onFinish (or similar) callback of the previous iteration – one at a time.

@mvasigh
Copy link
Author

mvasigh commented Oct 29, 2019

Good point! I assumed that the second portion of the animation is intended to loop (rather than just run 50 times) so I separated the two into different anime instantiations and return a Promise that resolves to the timeline.

Before:
Screen Shot 2019-10-29 at 12 37 24 PM

After (showing both the first "half" and the timeline with looping animation):
Screen Shot 2019-10-29 at 12 34 46 PM
Screen Shot 2019-10-29 at 12 36 01 PM

However, since we are no longer adding multiple stages, seems like we don't need a timeline instance and should just loop the second portion? Should I just remove the use of timeline? (haven't worked with this lib before)

@pastelsky pastelsky force-pushed the bundlephobia branch 4 times, most recently from 7572841 to 1d11eaf Compare June 6, 2021 11:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Progress hex animation blocks render on mount
2 participants