Room list preloader doesn't disappear if the user has zero rooms

[anoadragon453]

Description

When signing in after creating a fresh account, a user has no rooms. The new room list preloader (is there an official name for this?) seems to stick around until some rooms come in. For a new user, this will not happen until they create or join a room.

Here's what they'll see. As a user, it looks as if the app is loading and taking forever.

If this is on purpose, a suggestion is to instead show a call to action in the room list, once again encouraging the user to Start a Chat or Explore Public Rooms, and giving them clear direction on how to do so.

Steps to reproduce

• Create a new account
• Login

Logs being sent: no

Version information

• Platform: web
• Browser: Firefox Nightly 85.0a1
• OS: Debian Linux
• URL: develop.element.io

[anoadragon453]

Oh, we do have this!

This showed up as soon as I started a chat with a user (so I now have a DM, but no public rooms that I'm in). I think showing this instead of the preloader would be perfect.

[t3chguy]

It isn't a loader, its a blank state for the purpose of making the UI feel less dead. Official name is skeleton UI. The CTAs are shown when the user tries to filter, @niquewoodhouse do we want to show them anyway?

(FTR I expressed the point that it may look like a stuck loading state during dev, but we converged on since its not animated it does not do too badly as that)

[anoadragon453]

@t3chguy thanks for the explanation!

It is indeed not animated, but I still haven't ever seen this pattern used outside of a "loading" state, so that's why my mind went. I'm just one user though!

[wmww]

Heads up this continues to confuse new users: https://twitter.com/__justplaying/status/1540265891996237826

[niquewoodhouse]

It isn't a loader, its a blank state for the purpose of making the UI feel less dead. Official name is skeleton UI. The CTAs are shown when the user tries to filter, @niquewoodhouse do we want to show them anyway?

I think we should just remove the skeleton UI, its unfortunately causing issues for people expecting it to be something else. The delight team should focus on ways to encourage people to perform actions to make an empty list less likely.

[anoadragon453]

Some alternative ideas:

[gabrc52]

Keep in mind this screen is people's first impression of Element and likely Matrix as a whole.

It also looks like a loading indicator to me: https://www.codepicky.com/content-placeholders/ https://github.com/zalog/placeholder-loading

Just because it is not animated, does not make it look not like a loading indicator. Sometimes webpages load fast so users may be familiar with the pattern but not really know those are supposed to animate. The important thing is that this feels like it is loading, and we should not require users to think it through "it is not animated, therefore it is not loading", since they won't.

https://m2.material.io/design/communication/empty-states.html#content
A possible thing to do is to show some suggested rooms from the room directory (just a thought).

Could your design team reconsider this design decision?