DELETE INTERSECTION OBSERVER ARTICLE

app/soapbox/features/ui/index.js

@@ -35,7 +35,6 @@ import { fetchFollowRequests } from '../../actions/accounts';
 import { fetchReports, fetchUsers, fetchConfig } from '../../actions/admin';
 import { uploadCompose, resetCompose } from '../../actions/compose';
 import { fetchFilters } from '../../actions/filters';
-import { clearHeight } from '../../actions/height_cache';
 import { openModal } from '../../actions/modals';
 import { expandNotifications } from '../../actions/notifications';
 import { fetchScheduledStatuses } from '../../actions/scheduled_statuses';
@@ -187,7 +186,6 @@ class SwitchingColumnsArea extends React.PureComponent {
   static propTypes = {
     children: PropTypes.node,
     location: PropTypes.object,
-    onLayoutChange: PropTypes.func.isRequired,
     soapbox: ImmutablePropTypes.record.isRequired,
     features: PropTypes.object.isRequired,
   };
@@ -205,9 +203,6 @@ class SwitchingColumnsArea extends React.PureComponent {
   }
 
   handleResize = debounce(() => {
-    // The cached heights are no longer accurate, invalidate
-    this.props.onLayoutChange();
-
     this.setState({ mobile: isMobile(window.innerWidth) });
   }, 500, {
     trailing: true,
@@ -408,11 +403,6 @@ class UI extends React.PureComponent {
     mobile: isMobile(window.innerWidth),
   };
 
-  handleLayoutChange = () => {
-    // The cached heights are no longer accurate, invalidate
-    this.props.dispatch(clearHeight());
-  }
-
   handleDragEnter = (e) => {
     e.preventDefault();
 
@@ -756,7 +746,7 @@ class UI extends React.PureComponent {
           <div className='z-10 flex flex-col'>
             <Navbar />
 
-            <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange} soapbox={soapbox} features={features}>
+            <SwitchingColumnsArea location={location} soapbox={soapbox} features={features}>
               {children}
             </SwitchingColumnsArea>
 

app/soapbox/features/ui/util/get_rect_from_entry.js

@@ -1,21 +0,0 @@
-
-// Get the bounding client rect from an IntersectionObserver entry.
-// This is to work around a bug in Chrome: https://crbug.com/737228
-
-let hasBoundingRectBug;
-
-function getRectFromEntry(entry) {
-  if (typeof hasBoundingRectBug !== 'boolean') {
-    const boundingRect = entry.target.getBoundingClientRect();
-    const observerRect = entry.boundingClientRect;
-    hasBoundingRectBug = boundingRect.height !== observerRect.height ||
-      boundingRect.top !== observerRect.top ||
-      boundingRect.width !== observerRect.width ||
-      boundingRect.bottom !== observerRect.bottom ||
-      boundingRect.left !== observerRect.left ||
-      boundingRect.right !== observerRect.right;
-  }
-  return hasBoundingRectBug ? entry.target.getBoundingClientRect() : entry.boundingClientRect;
-}
-
-export default getRectFromEntry;

app/soapbox/features/ui/util/intersection_observer_wrapper.js

@@ -1,57 +0,0 @@
-// Wrapper for IntersectionObserver in order to make working with it
-// a bit easier. We also follow this performance advice:
-// "If you need to observe multiple elements, it is both possible and
-// advised to observe multiple elements using the same IntersectionObserver
-// instance by calling observe() multiple times."
-// https://developers.google.com/web/updates/2016/04/intersectionobserver
-
-class IntersectionObserverWrapper {
-
-  callbacks = {};
-  observerBacklog = [];
-  observer = null;
-
-  connect(options) {
-    const onIntersection = (entries) => {
-      entries.forEach(entry => {
-        const id = entry.target.getAttribute('data-id');
-        if (this.callbacks[id]) {
-          this.callbacks[id](entry);
-        }
-      });
-    };
-
-    this.observer = new IntersectionObserver(onIntersection, options);
-    this.observerBacklog.forEach(([ id, node, callback ]) => {
-      this.observe(id, node, callback);
-    });
-    this.observerBacklog = null;
-  }
-
-  observe(id, node, callback) {
-    if (!this.observer) {
-      this.observerBacklog.push([ id, node, callback ]);
-    } else {
-      this.callbacks[id] = callback;
-      this.observer.observe(node);
-    }
-  }
-
-  unobserve(id, node) {
-    if (this.observer) {
-      delete this.callbacks[id];
-      this.observer.unobserve(node);
-    }
-  }
-
-  disconnect() {
-    if (this.observer) {
-      this.callbacks = {};
-      this.observer.disconnect();
-      this.observer = null;
-    }
-  }
-
-}
-
-export default IntersectionObserverWrapper;