From ca0e8be20cf35cce88b17e852448122219c0914f Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 30 Sep 2017 05:28:49 -0700
Subject: [PATCH] Improve IntersectionObserverArticle perf (#5152)
---
.../intersection_observer_article.js | 37 +++++++++++--------
1 file changed, 21 insertions(+), 16 deletions(-)
diff --git a/app/javascript/mastodon/components/intersection_observer_article.js b/app/javascript/mastodon/components/intersection_observer_article.js
index 575743350c..e2ce9ec965 100644
--- a/app/javascript/mastodon/components/intersection_observer_article.js
+++ b/app/javascript/mastodon/components/intersection_observer_article.js
@@ -58,26 +58,31 @@ export default class IntersectionObserverArticle extends React.Component {
}
handleIntersection = (entry) => {
- const { onHeightChange, saveHeightKey, id } = this.props;
+ this.entry = entry;
- if (this.node && this.node.children.length !== 0) {
- // save the height of the fully-rendered element
- this.height = getRectFromEntry(entry).height;
+ scheduleIdleTask(this.calculateHeight);
+ this.setState(this.updateStateAfterIntersection);
+ }
- if (onHeightChange && saveHeightKey) {
- onHeightChange(saveHeightKey, id, this.height);
- }
+ updateStateAfterIntersection = (prevState) => {
+ if (prevState.isIntersecting && !this.entry.isIntersecting) {
+ scheduleIdleTask(this.hideIfNotIntersecting);
}
+ return {
+ isIntersecting: this.entry.isIntersecting,
+ isHidden: false,
+ };
+ }
- this.setState((prevState) => {
- if (prevState.isIntersecting && !entry.isIntersecting) {
- scheduleIdleTask(this.hideIfNotIntersecting);
- }
- return {
- isIntersecting: entry.isIntersecting,
- isHidden: false,
- };
- });
+ calculateHeight = () => {
+ const { onHeightChange, saveHeightKey, id } = this.props;
+ // save the height of the fully-rendered element (this is expensive
+ // on Chrome, where we need to fall back to getBoundingClientRect)
+ this.height = getRectFromEntry(this.entry).height;
+
+ if (onHeightChange && saveHeightKey) {
+ onHeightChange(saveHeightKey, id, this.height);
+ }
}
hideIfNotIntersecting = () => {
--
GitLab