Turn off scroll compensation for partial unfold

FreeFeed · Apr 19, 2024 · 6e8de8b · 6e8de8b
1 parent 94a1203
commit 6e8de8b
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 69 deletions.
diff --git a/src/components/post/post-comment.jsx b/src/components/post/post-comment.jsx
@@ -388,7 +388,6 @@ class PostComment extends Component {
         data-author={this.props.user && !this.props.isEditing ? this.props.user.username : ''}
         ref={this.registerCommentContainer}
         role="comment listitem"
-        id={this.props.id ? `c-${this.props.id}` : null}
       >
         {this.renderCommentIcon()}
         {this.renderBody()}

diff --git a/src/components/post/post-comments/index.jsx b/src/components/post/post-comments/index.jsx
@@ -2,7 +2,7 @@
 import { createRef, Fragment, Component } from 'react';
 
 import { preventDefault, pluralForm, handleLeftClick } from '../../../utils';
-import { intentToScroll, safeScrollBy } from '../../../services/unscroll';
+import { safeScrollBy } from '../../../services/unscroll';
 import ErrorBoundary from '../../error-boundary';
 import { Icon } from '../../fontawesome-icons';
 import { faCommentPlus } from '../../fontawesome-custom-icons';
@@ -38,8 +38,6 @@ export default class PostComments extends Component {
   visibleCommentIds = createRef([]);
   unfocusTimer = createRef(0);
 
-  commentAfterFoldId = null;
-
   constructor(props) {
     super(props);
 
@@ -311,12 +309,8 @@ export default class PostComments extends Component {
     this.setState({ folded: true, addedToTail: 0 });
   };
 
-  /** @type {string|null} */
-  fixedCommentId = null;
-
   expandComments = (count = 0) => {
     if (count > 0) {
-      this.fixedCommentId = this.commentAfterFoldId;
       this.setState({ folded: true, addedToTail: this.state.addedToTail + count });
     } else {
       this.setState({ folded: false, addedToTail: 0 });
@@ -326,53 +320,7 @@ export default class PostComments extends Component {
     }
   };
 
-  getSnapshotBeforeUpdate() {
-    if (!this.fixedCommentId) {
-      return null;
-    }
-
-    const { fixedCommentId } = this;
-
-    const el = this.rootEl.current.querySelector(`#c-${fixedCommentId}`);
-    if (!el) {
-      return null;
-    }
-    const { top } = el.getBoundingClientRect();
-    intentToScroll();
-    return () => {
-      if (fixedCommentId === this.commentAfterFoldId) {
-        return;
-      }
-
-      this.fixedCommentId = null;
-      const el = this.rootEl.current.querySelector(`#c-${fixedCommentId}`);
-      if (!el) {
-        return;
-      }
-      const newTop = el.getBoundingClientRect().top;
-      safeScrollBy(0, newTop - top);
-      // Compensate scroll again, after the full render
-      setTimeout(() => safeScrollBy(0, el.getBoundingClientRect().top - top), 0);
-
-      // Unfold animation
-      {
-        let commentEl = el;
-        if (commentEl) {
-          for (let i = 0; i < this.props.foldStep; i++) {
-            commentEl = commentEl.previousElementSibling;
-            if (!commentEl || !commentEl.matches('.comment')) {
-              break;
-            }
-            commentEl.classList.add('just-unfolded');
-            commentEl.offsetHeight; // to commit DOM changes
-            commentEl.classList.remove('just-unfolded');
-          }
-        }
-      }
-    };
-  }
-
-  componentDidUpdate(prevProps, prevState, actionAfterUpdate) {
+  componentDidUpdate(prevProps, prevState) {
     if (this.state.folded && !prevState.folded) {
       const linkEl = this.rootEl.current.querySelector('.more-comments-wrapper');
       if (!linkEl) {
@@ -383,7 +331,6 @@ export default class PostComments extends Component {
         safeScrollBy(0, top);
       }
     }
-    actionAfterUpdate?.();
   }
 
   renderAddComment() {
@@ -547,8 +494,6 @@ export default class PostComments extends Component {
     const firstCommentSpacer =
       comments.length > 0 ? this.renderCommentSpacer(comments[0].createdAt, post.createdAt) : null;
 
-    this.commentAfterFoldId = tailComments[0]?.props.id ?? null;
-
     return (
       <div
         className="comments"

diff --git a/styles/shared/comments.scss b/styles/shared/comments.scss
@@ -28,7 +28,9 @@
   background-color: var(--bg-color);
   box-shadow: 0 0 0 3px var(--bg-color);
   border-radius: 1px;
-  transition: all 0.2s;
+  transition:
+    background-color 0.2s,
+    box-shadow 0.2s;
 
   .comment-body {
     word-wrap: break-word;
@@ -118,16 +120,6 @@
       color: $hidden-color !important;
     }
   }
-
-  transform: translateY(0);
-  opacity: 1;
-
-  &.just-unfolded {
-    transform: translateY(16px);
-    opacity: 0.5;
-    transition: all 0s;
-    will-change: transform;
-  }
 }
 
 .comment-tail {