Refactor intersection observer article code

1 files changed, 13 insertions, 14 deletions

diff --git a/app/javascript/flavours/glitch/components/intersection_observer_article.js b/app/javascript/flavours/glitch/components/intersection_observer_article.js
index 03d8f17c6..900c98638 100644
--- a/app/javascript/flavours/glitch/components/intersection_observer_article.js
+++ b/app/javascript/flavours/glitch/components/intersection_observer_article.js
@@ -103,24 +103,23 @@ export default class IntersectionObserverArticle extends ImmutablePureComponent
     const { children, id, index, listLength, cachedHeight } = this.props;
     const { isIntersecting, isHidden } = this.state;
 
+    const style = {};
+
     if (!isIntersecting && (isHidden || cachedHeight)) {
-      return (
-        <article
-          ref={this.handleRef}
-          aria-posinset={index + 1}
-          aria-setsize={listLength}
-          style={{ height: `${this.height || cachedHeight || 150}px`, opacity: 0, overflow: 'hidden' }}
-          data-id={id}
-          tabIndex='0'
-        >
-          {children && React.cloneElement(children, { hidden: true })}
-        </article>
-      );
+      style.height = `${this.height || cachedHeight || 150}px`;
+      style.opacity = 0;
+      style.overflow = 'hidden';
     }
 
     return (
-      <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex='0'>
-        {children && React.cloneElement(children, { hidden: false })}
+      <article
+        ref={this.handleRef}
+        aria-posinset={index + 1}
+        aria-setsize={listLength}
+        data-id={id}
+        tabIndex='0'
+        style={style}>
+          {children && React.cloneElement(children, { hidden: !isIntersecting && (isHidden || cachedHeight) })}
       </article>
     );
   }