OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Try using requestAnimationFrame if available for sticky headers 

This might help performance, or it might not. Let's try it!
pull/21833/head
Travis Ralston 2020-07-07 11:33:32 -06:00
parent 652b443097
commit e6b20088c0
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/structures/LeftPanel2.tsx
View File

@ -69,6 +69,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
private listContainerRef: React.RefObject<HTMLDivElement> = createRef(); private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
private tagPanelWatcherRef: string; private tagPanelWatcherRef: string;
private focusedElement = null; private focusedElement = null;
private isDoingStickyHeaders = false;
constructor(props: IProps) { constructor(props: IProps) {
super(props); super(props);
@ -113,6 +114,24 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
}; };
private handleStickyHeaders(list: HTMLDivElement) { private handleStickyHeaders(list: HTMLDivElement) {
// TODO: Evaluate if this has any performance benefit or detriment.
// See https://github.com/vector-im/riot-web/issues/14035
if (this.isDoingStickyHeaders) return;
this.isDoingStickyHeaders = true;
if (window.requestAnimationFrame) {
window.requestAnimationFrame(() => {
this.doStickyHeaders(list);
this.isDoingStickyHeaders = false;
});
} else {
this.doStickyHeaders(list);
this.isDoingStickyHeaders = false;
}
}
private doStickyHeaders(list: HTMLDivElement) {
this.isDoingStickyHeaders = true;
const rlRect = list.getBoundingClientRect(); const rlRect = list.getBoundingClientRect();
const bottom = rlRect.bottom; const bottom = rlRect.bottom;
const top = rlRect.top; const top = rlRect.top;