fix(LeftSidebar): wrong user status after scrolling

[ShGKme]

☑️ Resolves

On scrolling user status in 1-1 conversations in the LeftSidebar is not correct.

• User's avatar and user status is displayed by NcAvatar component.
• With virtual scrolling components are reused. During scrolling new visible conversations are just given props of previous.
• It works only for components that react on props update
• NcAvatar supports user update but doesn't support preloadedUserStatus update

🚧 Tasks

• Add key to NcAvatar and re-mount avatar for 1-1 conversation during scrolling.

Drawbacks and alternative solution

It is less performant that adding support of preloadUserStatus change to NcAvatar.

Ideally it should be fixed on @nextcloud/vue. But I cannot say how much is the difference.

🏁 Checklist

• ⛑️ Tests (unit and/or integration) are included or not required
• 📘 API documentation in docs/ has been updated or is not required
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required
• 🔖 Capability is added or not needed

[ShGKme]

/backport to stable27

[Antreesy]

Tested with desktop client on c.nc.c, all statuses are at their own places.

follow-up:

• does it make sense to keep img tag now?
  

• can we upstream handling of preloadedUserStatus? watch for prop changes to update should be enough, I suppose?

[ShGKme]

does it make sense to keep img tag now?

key on <img> helps to keeps Image DOM element during scrolling and re-create it on long scrolling when src actually changes. It removes glitch when src is updated on existing image.

key on <NcAvatar> recreates a whole component instance. It also re-creates its <img>. But I'd call it a temporal solution. We should not re-create <NcAvatar>.

So we should add status update support to <NcAvatar> and check if there is anything we can disable when it is not needed for performant update.

We can also consider adding key to img inside NcAvatar. But need to check if it won't have any drawbacks.