fix(chat): instant scroll + larger at-bottom threshold + footer spacer (Discord-clean)
This commit is contained in:
@@ -1046,14 +1046,32 @@ export function ConversationPage() {
|
|||||||
// the bottom; returning `false` from the callback when they're
|
// the bottom; returning `false` from the callback when they're
|
||||||
// scrolled up preserves their reading position when realtime
|
// scrolled up preserves their reading position when realtime
|
||||||
// messages arrive (critical UX: do NOT jerk the user).
|
// messages arrive (critical UX: do NOT jerk the user).
|
||||||
followOutput={(isAtBottom) => (isAtBottom ? 'smooth' : false)}
|
//
|
||||||
|
// We deliberately use 'auto' (instant) rather than 'smooth':
|
||||||
|
// with a smooth scroll animation, atBottomStateChange fires
|
||||||
|
// `false` mid-animation (scrollTop is briefly above the new
|
||||||
|
// bottom) and then `true` after settle — that flips
|
||||||
|
// stickToBottom twice, flashing the "Zum neuesten" pill and
|
||||||
|
// re-rendering the whole list. Instant scroll has zero
|
||||||
|
// mid-animation state so the cascade never happens.
|
||||||
|
followOutput={(isAtBottom) => (isAtBottom ? 'auto' : false)}
|
||||||
atBottomStateChange={handleAtBottomStateChange}
|
atBottomStateChange={handleAtBottomStateChange}
|
||||||
atBottomThreshold={80}
|
// 250 px tolerance — large enough that appending a tall row
|
||||||
|
// (image, voice note, grouped attachments) doesn't push the
|
||||||
|
// user out of the at-bottom zone. The previous 80 px flipped
|
||||||
|
// stickToBottom on nearly every typical message arrival.
|
||||||
|
atBottomThreshold={250}
|
||||||
rangeChanged={handleRangeChanged}
|
rangeChanged={handleRangeChanged}
|
||||||
startReached={handleStartReached}
|
startReached={handleStartReached}
|
||||||
// Render rows just outside the viewport so fast scrolling
|
// Render rows just outside the viewport so fast scrolling
|
||||||
// doesn't briefly flash empty space.
|
// doesn't briefly flash empty space.
|
||||||
increaseViewportBy={400}
|
increaseViewportBy={400}
|
||||||
|
// Visual breathing space below the last message so a bubble
|
||||||
|
// bottom doesn't sit flush against the composer top — matches
|
||||||
|
// Discord's chat-pane bottom padding.
|
||||||
|
components={{
|
||||||
|
Footer: () => <div style={{ height: '12px' }} />,
|
||||||
|
}}
|
||||||
itemContent={(_index, row) => {
|
itemContent={(_index, row) => {
|
||||||
if (row.kind === 'loader') {
|
if (row.kind === 'loader') {
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user