Hero animation for images should run only to/from lightbox, not between message lists

[gnprice]

When a message has an image and you tap the image to see it in the lightbox, we use a Hero widget to cause the image to animate from its old position and size in the message list to its new position and size in the lightbox, and to do the same in reverse when you navigate back.

Currently, though, our implementation of this causes those "hero" animations to happen also when you navigate from one message list to another that happens to contain the same image-bearing message. That doesn't make so much sense, and tends to look glitchy. It can look extra glitchy when the message is off screen either before or after the navigation (or even both), as spotted by @alexmv: https://chat.zulip.org/#narrow/stream/48-mobile/topic/Images.20have.20the.20wrong.20z-index/near/1932012

So we should fix that.

I think the way to implement this will be to augment the tag parameter we pass to Hero so that it identifies not only the message and the image within the message, but the message list the message is shown in.

[shumail05]

i want to work on this issue , please assign this to me.

[Adityakk9031]

can try to resolve this issue

[chrisbobbe]

Please take a look at the Zulip project's guide to getting involved with the code:

https://zulip.readthedocs.io/en/latest/contributing/contributing.html#your-first-codebase-contribution https://zulip.readthedocs.io/en/latest/contributing/contributing.html#picking-an-issue-to-work-on

[lakshya1goel]

Please assign this issue to me, I have started working on this. Created a draft PR as well need to add tests.

Implementation Video

Before

https://github.com/user-attachments/assets/37a832c2-87d6-4223-a47e-f5549fccfead

After

https://github.com/user-attachments/assets/206af9a4-f487-49ad-adca-54faa70d5783

[lakshya1goel]

PR #1348 is ready for review. PTAL, Thanks!