search

element-hq / element-web

A glossy Matrix collaboration client for the web.
https://element.io
GNU Affero General Public License v3.0
11.2k stars 2k forks source link

Provide UI Feedback when "Jump To Date" is in progress #21263

Open BurnyBoi opened 2 years ago

BurnyBoi commented 2 years ago

Your use case

What would you like to do?

When selecting a date to jump to, provide feedback that the jump is in progress in case there is a delay.

Why would you like to do it?

Currently, when selecting a jump that takes a while to do (Beginning of Room for example), there is nothing on the UI indicating that Element is working on the jump. If you wait a while, and even go to move to another room, it will eventually do the jump, but this can be confusing.

Have you considered any alternatives?

The best alternative would be if Jump To Date was always fast enough to never need a "loading" indicator, but it's understandable that it takes time.

Additional context

No response

t3chguy commented 2 years ago

and even go to move to another room, it will eventually do the jump, but this can be confusing.

This is another bug which needs fixing, if you change room it should not take you back out of it when it completes.

Pattygeek commented 2 years ago

@dbkr t Hi, I am an outreachy applicant, please can you assign this issue to me?

SimonBrandner commented 2 years ago

@dbkr t Hi, I am an outreachy applicant, please can you assign this issue to me?

I've assigned you to the issue. If you need any help/have any questions be sure to visit #element-dev:matrix.org!

Pattygeek commented 2 years ago

Hi @BurnyBoi please, Can you outline the steps to reproduce this bug?

BurnyBoi commented 2 years ago

Hi @BurnyBoi please, Can you outline the steps to reproduce this bug?

You need a room with a large amount of events spanning over a long time, and then attempt to jump to either a date really far in the past, or select Beginning of Room. If the room is large enough, it will take a long time for the jump to happen, and you'll be able to do other things on the UI while you wait (including going to another room)

MadLittleMods commented 1 year ago

and even go to move to another room, it will eventually do the jump, but this can be confusing.

This is another bug which needs fixing, if you change room it should not take you back out of it when it completes.

This is being fixed by https://github.com/matrix-org/matrix-react-sdk/pull/10405

In terms of indicating loading state (jump to date in progress), some prior art on UI patterns we could use:

src/components/structures/RoomStatusBar.tsx sticky at the bottom of the timeline:

src/components/views/rooms/DecryptionFailureBar.tsx sticky at the top of the timeline view:

We could share this pattern when:

  1. Page-loading with an event ID in the URL
  2. Navigating to a permalink /goto matrix.to
  3. Jumping from the thread panel to viewing the thread root in the main timeline via View in room
  4. Jumping to a pinned message
  5. Jumping from a search result
  6. Jumping from a message in the Notifications panel
MadLittleMods commented 1 year ago

Here is a proof of concept (PoC):

A little inderterminate loading bar sliver the shows the loading state and transforms into a full bar like the decrypt failure bar explaining what's loading.

It starts as a little sliver for a few seconds so that it doesn't disrupt your visuals with a flash of something if requests are flowing fast as normal (no need to make the user think they missed some piece of information). But you still get an indication of what's going on. And will get more info if time elapses more than normal. Also slides away after request completes.

The date format could be improved imo but this is what formatFullDateNoDay gives at the moment.

As mentioned in the previous reply, we could apply this pattern to our other loading position in timeline scenarios.

PoC markup Look for `.mx_RoomView_auxPanel` and put this markup in there to produce the output above. Toggle the `expanded` class to get the effect. ```html

Jumping to 3-14-2022 at 12-37-21 AM

Please wait while we find the closest event and load the messages in the room.

Cancel
```
rufuskahler commented 1 year ago

@MadLittleMods – This feels like an elegant design solution, reusing existing components. For additional context, can you please include details of the exact steps a user might take in order to jump to a new date?

Regarding copy – I'd suggest removing the precise details of the target date, and finding a synonym for 'event' that feels less technical.

rufuskahler commented 1 year ago

...struggling to discover the Jump To Date picker described here

MadLittleMods commented 1 year ago

For additional context, can you please include details of the exact steps a user might take in order to jump to a new date?

If they use the jump to date separators:

  1. A user wants to jump to last week where they talked about something
  2. They scroll to the closest date separator and open the jump to date context menu
  3. Choosing "Last week" starts the jump process
  4. This sweeps them off their feet to their desired position in the room

If they use the /jumptodate slash command:

  1. A user wants to jump to last week where they talked about something
  2. They type /jumptodate 2023-03-23, then enter to activate the slash command
  3. This sweeps them off their feet to their desired position in the room

...struggling to discover the Jump To Date picker described https://github.com/matrix-org/matrix-react-sdk/pull/10419

If you'd like to try jump to date yourself, you need to run through the Testing strategy explained in #10419 . It's unfortunately hard to enable at the moment since Synapse doesn't advertise stable support yet.

Regarding copy – I'd suggest removing the precise details of the target date, and finding a synonym for 'event' that feels less technical.

We could say message but then that duplicates message in the sentence and sounds a bit weird to me. We could also say position but that doesn't seem better and it's less precise. date could also work.

Here is a different iteration but it doesn't stand out to me as better:

Jumping to date

Please wait while we navigate to that position and load the messages in the room.

rufuskahler commented 1 year ago

@MadLittleMods – Having tested this out in situ, I believe your suggestion for the more concise copy is a better option, esp bearing in mind scenarios where the copy is displayed for very short time periods (e.g <1 second). Sharing some more ideas below, which sacrifice precision and visibility of system status for brevity and a focus on outcomes:

Jumping to date Please wait while [content/messages] load/s.

Jumping to date Please wait while the timeline reloads.

MadLittleMods commented 1 year ago

👍 I think this sounds pretty good (slight variation from "reloads" -> "loads"):

Jumping to date

Please wait while the timeline loads.

Thanks for trying it out @rufuskahler ! I'll assign you to the pull request when I get a chance to get it up ⏩