Pinned messages panel shows empty state before fetching and displaying the list

[MadLittleMods]

Steps to reproduce

1. Page-load app
2. Go to a room with pinned messages
3. Open the pinned messages panel
4. Notice how it shows the empty state for a while then finally populates with what you expect. This is especially jarring when the icon has the extra red dot indicating something is new but no message is shown when opening the panel.

Outcome

What did you expect?

Pinned messages panel would show a loading state while waiting for messages. Or ideally just show me the new pin since obviously there is a red dot with something to show me.

What happened instead?

All pinned messages were not visible and the empty state was shown when there are in fact pinned messages in the room that you just need to wait to load in.

Operating system

Windows 10

Browser information

Chrome Version 110.0.5481.100

URL for webapp

https://develop.element.io/

Application version

Element version: 5de1b0a-react-1a08c6ba3af1-js-d70ffdbc0244 Olm version: 3.2.12

Homeserver

matrix.org

Will you send logs?

No

[t3chguy]

@MadLittleMods I cannot reproduce your report, spinner is there just fine for me.

Screen.Recording.2023-03-14.at.12.10.05.mov

[MadLittleMods]

@t3chguy Maybe open it a few times. Just tried reproducing again and was easy to see after a couple tries and after page-loading. The first time I opened the pinned messages panel in one room in my existing Element session, it did show the loading spinner but closing and opening again showed the empty state. And then refreshing Element and trying again, showed the empty state on the first try.

There are a couple gifs showing off these details in this rageshake: https://github.com/matrix-org/element-web-rageshakes/issues/20615

[MadLittleMods]

Thanks for the fix @t3chguy 🦍