From e6b20088c0a1c87067f99444d3f90b693ad26cf4 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 7 Jul 2020 11:33:32 -0600
Subject: [PATCH 1/2] Try using requestAnimationFrame if available for sticky
 headers

This might help performance, or it might not. Let's try it!
---
 src/components/structures/LeftPanel2.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx
index b2a2384cb2..36012a1473 100644
--- a/src/components/structures/LeftPanel2.tsx
+++ b/src/components/structures/LeftPanel2.tsx
@@ -69,6 +69,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
     private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
     private tagPanelWatcherRef: string;
     private focusedElement = null;
+    private isDoingStickyHeaders = false;
 
     constructor(props: IProps) {
         super(props);
@@ -113,6 +114,24 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
     };
 
     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 bottom = rlRect.bottom;
         const top = rlRect.top;

From baccabeae461048e1da8d9d52f4b51c33ab170ed Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 7 Jul 2020 11:34:52 -0600
Subject: [PATCH 2/2] Remove extraneous true

---
 src/components/structures/LeftPanel2.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx
index 36012a1473..7fac6cbff1 100644
--- a/src/components/structures/LeftPanel2.tsx
+++ b/src/components/structures/LeftPanel2.tsx
@@ -131,7 +131,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
     }
 
     private doStickyHeaders(list: HTMLDivElement) {
-        this.isDoingStickyHeaders = true;
         const rlRect = list.getBoundingClientRect();
         const bottom = rlRect.bottom;
         const top = rlRect.top;