Improve IntersectionObserverArticle perf (#5152)

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;
 
-      if (onHeightChange && saveHeightKey) {
+    scheduleIdleTask(this.calculateHeight);
-        onHeightChange(saveHeightKey, id, this.height);
+    this.setState(this.updateStateAfterIntersection);
-      }
   }
 
-    this.setState((prevState) => {
+  updateStateAfterIntersection = (prevState) => {
-      if (prevState.isIntersecting && !entry.isIntersecting) {
+    if (prevState.isIntersecting && !this.entry.isIntersecting) {
       scheduleIdleTask(this.hideIfNotIntersecting);
     }
     return {
-        isIntersecting: entry.isIntersecting,
+      isIntersecting: this.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 = () => {