Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Add a special-case to ScrollPanel list height calculation for when th…
Browse files Browse the repository at this point in the history
…e timeline is very barren
  • Loading branch information
t3chguy committed Apr 22, 2022
1 parent 85b7be7 commit 51b1155
Showing 1 changed file with 16 additions and 17 deletions.
33 changes: 16 additions & 17 deletions src/components/structures/ScrollPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,11 @@ const DEBUG_SCROLL = false;
// The amount of extra scroll distance to allow prior to unfilling.
// See getExcessHeight.
const UNPAGINATION_PADDING = 6000;
// The number of milliseconds to debounce calls to onUnfillRequest, to prevent
// many scroll events causing many unfilling requests.
// The number of milliseconds to debounce calls to onUnfillRequest,
// to prevent many scroll events causing many unfilling requests.
const UNFILL_REQUEST_DEBOUNCE_MS = 200;
// _updateHeight makes the height a ceiled multiple of this so we
// don't have to update the height too often. It also allows the user
// to scroll past the pagination spinner a bit so they don't feel blocked so
// updateHeight makes the height a ceiled multiple of this so we don't have to update the height too often.
// It also allows the user to scroll past the pagination spinner a bit so they don't feel blocked so
// much while the content loads.
const PAGE_SIZE = 400;

Expand Down Expand Up @@ -192,16 +191,14 @@ export default class ScrollPanel extends React.Component<IProps> {
private preventShrinkingState: IPreventShrinkingState;
private unfillDebouncer: number;
private bottomGrowth: number;
private pages: number;
private minListHeight: number;
private heightUpdateInProgress: boolean;
private divScroll: HTMLDivElement;

constructor(props, context) {
super(props, context);

if (this.props.resizeNotifier) {
this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
}
this.props.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize);

this.resetScrollState();
}
Expand All @@ -227,9 +224,7 @@ export default class ScrollPanel extends React.Component<IProps> {
// (We could use isMounted(), but facebook have deprecated that.)
this.unmounted = true;

if (this.props.resizeNotifier) {
this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize);
}
this.props.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize);
}

private onScroll = ev => {
Expand Down Expand Up @@ -541,7 +536,7 @@ export default class ScrollPanel extends React.Component<IProps> {
stuckAtBottom: this.props.startAtBottom,
};
this.bottomGrowth = 0;
this.pages = 0;
this.minListHeight = 0;
this.scrollTimeout = new Timer(100);
this.heightUpdateInProgress = false;
};
Expand Down Expand Up @@ -734,9 +729,13 @@ export default class ScrollPanel extends React.Component<IProps> {
const sn = this.getScrollNode();
const itemlist = this.itemlist.current;
const contentHeight = this.getMessagesHeight();
const minHeight = sn.clientHeight;
const height = Math.max(minHeight, contentHeight);
this.pages = Math.ceil(height / PAGE_SIZE);
// Only round to the nearest page when we're basing the height off the content, not off the scrollNode height
// otherwise it'll cause too much overscroll which makes it possible to entirely scroll content off-screen.
if (contentHeight < sn.clientHeight - PAGE_SIZE) {
this.minListHeight = sn.clientHeight;
} else {
this.minListHeight = Math.ceil(contentHeight / PAGE_SIZE) * PAGE_SIZE;
}
this.bottomGrowth = 0;
const newHeight = `${this.getListHeight()}px`;

Expand Down Expand Up @@ -805,7 +804,7 @@ export default class ScrollPanel extends React.Component<IProps> {
}

private getListHeight(): number {
return this.bottomGrowth + (this.pages * PAGE_SIZE);
return this.bottomGrowth + this.minListHeight;
}

private getMessagesHeight(): number {
Expand Down

0 comments on commit 51b1155

Please sign in to comment.