Skip to content
This repository has been archived by the owner on Mar 29, 2022. It is now read-only.

Scroll to newly received message if required #420

Merged
2 commits merged into from
Mar 18, 2021
Merged

Conversation

grahammcculloch
Copy link
Contributor

@grahammcculloch grahammcculloch commented Mar 15, 2021

Scroll to newly received message if required

Do not scroll if not previously at the bottom of the list.

Change-type: patch
Signed-off-by: Graham McCulloch graham@balena.io


Fixes product-os/jellyfish#5948

Do not scroll if not previously at the bottom of the list.

Change-type: patch
Signed-off-by: Graham McCulloch <graham@balena.io>
Firstly, some browsers have trouble scrolling smoothly - the scroll never completes. Secondly, when first loading the timeline, it's more useful to scroll immediately to the bottom. This has actually been requested by users.

Change-type: minor
Signed-off-by: Graham McCulloch <graham@balena.io>

// We consider it to be at the bottom if we're within 30 pixels of the bottom
return _.inRange(timelineEndRect.bottom, timelineRect.bottom - 1, timelineRect.bottom + 30)
} catch (error) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is try-catch needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@karaxuna my experience is that React can unset the current property of refs at inconvenient times. It probably isn't needed but I was nervous about not catching an error. Feel free to convince me it is indeed safe though.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@grahammcculloch I think it will throw if the timelineEnd.current is detached from dom and you call getBoundingClientRect. But maybe it can throw in other cases too, so I'm ok with this.


// We consider it to be at the bottom if we're within 30 pixels of the bottom
return _.inRange(timelineEndRect.bottom, timelineRect.bottom - 1, timelineRect.bottom + 30)
} catch (error) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@grahammcculloch I think it will throw if the timelineEnd.current is detached from dom and you call getBoundingClientRect. But maybe it can throw in other cases too, so I'm ok with this.

@grahammcculloch
Copy link
Contributor Author

@balena-ci rebase

@ghost ghost force-pushed the scroll-to-new-message branch from 8c18bb2 to 892122d Compare March 18, 2021 09:44
@ghost ghost merged commit 9e4e78f into master Mar 18, 2021
@ghost ghost deleted the scroll-to-new-message branch March 18, 2021 09:54
This pull request was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Timeline does not scroll to new message when it arrives in the timeline
2 participants