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

BurnyBoi · 2022-03-02T05:06:12Z

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 · 2022-03-02T11:17:57Z

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 · 2022-04-15T09:48:52Z

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

BurnyBoi · 2022-04-30T05:30:58Z

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 · 2023-03-21T07:55:48Z

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 matrix-org/matrix-react-sdk#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:

Page-loading with an event ID in the URL
Navigating to a permalink /goto matrix.to
Jumping from the thread panel to viewing the thread root in the main timeline via View in room
Jumping to a pinned message
Jumping from a search result
Jumping from a message in the Notifications panel

MadLittleMods · 2023-03-22T02:47:57Z

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.

<div class="expanded">
  <div class="progress-bar">
    <div class="progress-bar-value"></div>
  </div>

  <div class="room-navigation-bar-wrapper">
    <div class="room-navigation-bar">
      <div class="mx_Spinner room-navigation-bar-icon">
        <div style="width: 32px; height: 32px;" class="mx_Spinner_icon"></div>
      </div>

      <div class="room-navigation-bar-message">
        <h3 class="room-navigation-bar-heading">Jumping to 3-14-2022 at 12-37-21 AM</h3>
        <p class="room-navigation-bar-description">
        Please wait while we find the closest event and load the messages in the room.
        </p>
      </div>

      <div class="room-navigation-bar-actions">
        <div class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">Cancel</div>
      </div>
    </div>
  </div>
</div>

<style>
.room-navigation-bar-wrapper {
  overflow: hidden;
}

.room-navigation-bar {
  display: flex;
  padding: 12px;
  margin-left: 16px;
  margin-right: 16px;

  background-color: #f4f6fa;
  border-radius: 4px;

  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  transform: translateY(-100%);
}

.expanded .room-navigation-bar {
    transform: translateY(0%);
}

.room-navigation-bar-icon {
  margin-right: 12px;
}

.room-navigation-bar-message {
  
}

.room-navigation-bar-heading {
  margin: 0;
  font-size: 16px;
}

.room-navigation-bar-description {
  margin: 8px 0;
  color: #737d8c;
}

.room-navigation-bar-actions {
  margin-left: 12px;
}
</style>

<style>
/* Based off of https://codepen.io/tmac/pen/QgVRKb */
.progress-bar {
  position: absolute
  overflow: hidden;
  width: 100%;
  height: 3px;
  background-color: #0dbd8b55;
  background-color: #e3e8f0;
}

.expanded .progress-bar {
  display: none;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  animation: indeterminate-animation 1s infinite linear;
  transform-origin: 0% 50%;

  background-color: #0dbd8b;
  background-color: #737d8c;
}

@keyframes indeterminate-animation {
  0% {
    transform:  translateX(0) scaleX(0);
  }
  40% {
    transform:  translateX(0) scaleX(0.4);
  }
  100% {
    transform:  translateX(100%) scaleX(0.5);
  }
}
</style>

- Friendly error messages with details - Add a way to submit debug logs for actual errors (non-networking errors) - Don't jump someone back to a room they already navigated away from. Fixes bug mentioned in element-hq/element-web#21263 (comment)

rufuskahler · 2023-03-30T08:12:49Z

@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 · 2023-03-30T08:21:01Z

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

MadLittleMods · 2023-03-30T13:42:05Z

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:

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

If they use the /jumptodate slash command:

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

...struggling to discover the Jump To Date picker described matrix-org/matrix-react-sdk#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 · 2023-04-04T07:43:47Z

@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.

- Friendly error messages with details - Add a way to submit debug logs for actual errors (non-networking errors) - Don't jump someone back to a room they already navigated away from. Fixes bug mentioned in element-hq/element-web#21263 (comment)

MadLittleMods · 2023-04-06T21:46:45Z

👍 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 ⏩

BurnyBoi added the T-Enhancement label Mar 2, 2022

dbkr added O-Frequent Affects or can be seen by most users regularly or impacts most users' first experience A-Timeline labels Mar 2, 2022

t3chguy added the Z-Labs label Mar 2, 2022

This comment was marked as off-topic.

Sign in to view

SimonBrandner assigned Pattygeek Apr 9, 2022

turt2live unassigned Pattygeek Apr 12, 2022

robintown added the X-Needs-Design label Apr 15, 2022

MadLittleMods added the A-Jump-To-Date Jump to date headers or slash command label Feb 2, 2023

MadLittleMods mentioned this issue Mar 17, 2023

Better error handling in jump to date matrix-org/matrix-react-sdk#10405

Merged

5 tasks

MadLittleMods mentioned this issue May 5, 2023

Add some sort of lazy-loading matrix-org/matrix-viewer#222

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

BurnyBoi commented Mar 2, 2022 •

edited

Loading

t3chguy commented Mar 2, 2022

This comment was marked as off-topic.

This comment was marked as off-topic.

Pattygeek commented Apr 15, 2022 •

edited by MadLittleMods

Loading

BurnyBoi commented Apr 30, 2022 •

edited by MadLittleMods

Loading

MadLittleMods commented Mar 21, 2023 •

edited

Loading

MadLittleMods commented Mar 22, 2023 •

edited

Loading

rufuskahler commented Mar 30, 2023

rufuskahler commented Mar 30, 2023

MadLittleMods commented Mar 30, 2023 •

edited

Loading

rufuskahler commented Apr 4, 2023

MadLittleMods commented Apr 6, 2023

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

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

Comments

BurnyBoi commented Mar 2, 2022 • edited Loading

Your use case

What would you like to do?

Why would you like to do it?

Have you considered any alternatives?

Additional context

t3chguy commented Mar 2, 2022

This comment was marked as off-topic.

This comment was marked as off-topic.

Pattygeek commented Apr 15, 2022 • edited by MadLittleMods Loading

BurnyBoi commented Apr 30, 2022 • edited by MadLittleMods Loading

MadLittleMods commented Mar 21, 2023 • edited Loading

MadLittleMods commented Mar 22, 2023 • edited Loading

rufuskahler commented Mar 30, 2023

rufuskahler commented Mar 30, 2023

MadLittleMods commented Mar 30, 2023 • edited Loading

rufuskahler commented Apr 4, 2023

MadLittleMods commented Apr 6, 2023

BurnyBoi commented Mar 2, 2022 •

edited

Loading

Pattygeek commented Apr 15, 2022 •

edited by MadLittleMods

Loading

BurnyBoi commented Apr 30, 2022 •

edited by MadLittleMods

Loading

MadLittleMods commented Mar 21, 2023 •

edited

Loading

MadLittleMods commented Mar 22, 2023 •

edited

Loading

MadLittleMods commented Mar 30, 2023 •

edited

Loading