element-hq / element-hq/element-web

Uploading an image jumps the timeline erratically

Open
#18,018 0 comments 0 reactions 0 assignees View on GitHub
A-File-Upload A-Media A-Timeline-Jumpy-Scroll T-Defect
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

#### Description

Whenever im sending a picture, and i've scrolled to the bottom, the timeline jumps up and down late into the "uploading process"

#### Steps to reproduce

- scroll to bottom
- upload image
- observe jumping

#### Video

Videos

First one, though this one is a bit confusing, as the same image is uploaded as is lately visible in the timeline.

https://user-images.githubusercontent.com/22740616/125939334-3a034dd0-6e7d-4bcb-b41d-f5b563b04380.mp4

Second one, which takes a bit longer, and has the effect dimmed somewhat at the start.

https://user-images.githubusercontent.com/22740616/125940533-4bc465d8-a1b9-4307-9976-a09080b4faa5.mp4

#### Describe how what happens differs from what you expected.

Currently the timeline has to jump up when the image is starting to get uploaded (often with a delay), and then jump down when it's done and sent.

The jump up is disorienting because first a bottom part of the timeline is covered before the whole timeline moves up somewhat,

And the jump down is disorienting because, after viewing messenger timelines for ages and ages, jump-downs are associated with message deletion, and i've found myself often instinctively panicking when an image finally uploads, after the timeline moves down, as i thought that someone had deleted a message i havent read yet.

#### Describe an alternative

Maybe something like discord, which encapsulates the upload progress into one pseudo-message (one jump-up, as that message is getting placed), and then shows the media in full if it's displayable (another jump-up, as the message is finished);

Video

https://user-images.githubusercontent.com/22740616/125941175-e5d8596a-b0c4-41eb-b903-1a40a1fc320d.mp4

#### Version information

- **Platform**: desktop

- **OS**: Linux
- **Version**: 1.7.32

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue on the desktop client using the listed scroll-to-bottom and image-upload steps, then trace the timeline rendering during the upload lifecycle. Done means uploading an image no longer causes the timeline to jump erratically or move unexpectedly when the upload completes.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.