Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Performance issues when dealing with many shared-elements

See original GitHub issue

So, as promised, here’s my issue:

When there are ‘long’ transitions from v-shared-element, the SharedElementRouteGuard inside the router will prevent the route change until the transitions are done.
But not only that, there’s also a noticeable delay before the transition starts in the first place. I’m guessing this is due to illusory elements being created and prepared for transitioning.
This can take quite some time and is very noticeable, especially when click events are delayed by it.

Here’s a video of the issue: (the circled areas are where I clicked, you can see the delay between the touch indicator and the transition starting)

This seems like a problem with performance (the delay is longer on my phone compared to my laptop). Maybe you could optimize things a bit more, or see if there are any ‘expensive’ transitions which should be avoided?

Also, how about instead of waiting for the transition before changing the page, you just transition after the new route is mounted? This might at least improve perceived performance…

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:46 (24 by maintainers)

github_iconTop GitHub Comments

justintaddeicommented, Dec 24, 2020

Thank you!

Also, I’ve enabled GitHub Discussions for the repo if you ever have any questions that don’t warrant creating an issue 💬

justintaddeicommented, Dec 24, 2020

Finally! Sorry for such a HUGE delay on this. I’ve been super busy lately traveling and looking for work (I just turned 20).

I just released v3 again!

Read more comments on GitHub >

github_iconTop Results From Across the Web

The 5 Team Performance Issues Managers Need To Overcome
In this blog post, we'll list some of the most common employee performance issues managers face. From unsatisfactory work output to clashes ......
Read more >
SharedElements undesirable effect in RecyclerView
I solve the problem using: RecyclerView.setItemAnimator(null). because the standard didn't work ((SimpleItemAnimator) RecyclerView.
Read more >
IjzerenHein/react-native-shared-element - GitHub
This library solves that problem through an all native implementation which is very close ... And when using React Native 0.59 or lower,...
Read more >
Shared elements transitions for Web | by Prateek Bhatnagar
I've always been fascinated with such shared element transitions across native apps realm. They're fluid, eye catching and also transition ...
Read more >
Understanding the performance benefits of ConstraintLayout
Triggering that many expensive measure and layout phases is far from ... If you create the same layout using ConstraintLayout , the XML...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found