fix post visibility & optimization

packages/app/src/components/PostsList/index.jsx

@@ -35,6 +35,8 @@ export class PostsListsComponent extends React.Component {
         resumingLoading: false,
         initialLoading: true,
 
+        topVisible: true,
+
         realtimeUpdates: true,
 
         hasMore: true,
@@ -187,18 +189,38 @@ export class PostsListsComponent extends React.Component {
     onScrollList = (e) => {
         const { scrollTop } = e.target
 
-        if (this.state.resumingLoading) {
-            return null
-        }
-
         console.log("Scrolling => ", scrollTop)
 
         if (scrollTop > 200) {
+            if (this.state.topVisible) {
+                this.setState({
+                    topVisible: false,
+                })
+
+                if (typeof this.props.onTopVisibility === "function") {
+                    this.props.onTopVisibility(false)
+                }
+            }
+
+            if (!this.props.realtime || this.state.resumingLoading) {
+                return null
+            }
+
             this.setState({
                 realtimeUpdates: false,
             })
         } else {
-            if (!this.state.realtimeUpdates && !this.state.resumingLoading) {
+            if (!this.state.topVisible) {
+                this.setState({
+                    topVisible: true,
+                })
+
+                if (typeof this.props.onTopVisibility === "function") {
+                    this.props.onTopVisibility(true)
+                }
+            }
+
+            if (this.props.realtime || !this.state.realtimeUpdates && !this.state.resumingLoading) {
                 this.onResumeRealtimeUpdates()
             }
         }
@@ -227,10 +249,8 @@ export class PostsListsComponent extends React.Component {
             }
         }
 
-        if (this.props.realtime) {
-            if (this.listRef && this.listRef.current) {
-                this.listRef.current.addEventListener("scroll", this.onScrollList)
-            }
+        if (this.listRef && this.listRef.current) {
+            this.listRef.current.addEventListener("scroll", this.onScrollList)
         }
 
         window._hacks = this._hacks
@@ -251,10 +271,8 @@ export class PostsListsComponent extends React.Component {
             }
         }
 
-        if (this.props.realtime) {
-            if (this.listRef && this.listRef.current) {
-                this.listRef.current.removeEventListener("scroll", this.onScrollList)
-            }
+        if (this.listRef && this.listRef.current) {
+            this.listRef.current.removeEventListener("scroll", this.onScrollList)
         }
 
         window._hacks = null

packages/app/src/pages/account/index.jsx

@@ -44,9 +44,7 @@ const TabRender = React.memo((props, ref) => {
 	// forwards ref to the tab
 	return <div className={classnames("fade-opacity-active", { "fade-opacity-leave": transitionActive })}>
 		{
-			React.createElement(Tab, {
-				...props,
-			})
+			React.createElement(Tab, props)
 		}
 	</div>
 })
@@ -66,6 +64,8 @@ export default class Account extends React.Component {
 		isNotExistent: false,
 	}
 
+	profileRef = React.createRef()
+
 	contentRef = React.createRef()
 
 	coverComponent = React.createRef()
@@ -133,27 +133,15 @@ export default class Account extends React.Component {
 			isFollowed,
 			followers,
 		})
-
-		// create intersection observer for cover
-		this.coverIntersectionObserver = new IntersectionObserver((e) => {
-			if (e[0].intersectionRatio > 0) {
-				this.leftPanelRef.current.style.transform = "translate(0, -100px)"
-				this.actionsRef.current.style.opacity = "1"
-			} else {
-				this.leftPanelRef.current.style.transform = "translate(0, 0)"
-				this.actionsRef.current.style.opacity = "0"
-			}
-		}, {
-			root: document.querySelector("#root"),
-			threshold: 0
-		})
-
-		this.coverIntersectionObserver.observe(this.coverComponent.current)
 	}
 
-	componentWillUnmount = () => {
-		if (this.coverIntersectionObserver) {
-			this.coverIntersectionObserver.disconnect()
+	onPostListTopVisibility = (to) => {
+		console.log("onPostListTopVisibility", to)
+
+		if (to) {
+			this.profileRef.current.classList.remove("topHidden")
+		} else {
+			this.profileRef.current.classList.add("topHidden")
 		}
 	}
 
@@ -185,6 +173,8 @@ export default class Account extends React.Component {
 			return
 		}
 
+		this.onPostListTopVisibility(true)
+
 		key = key.toLowerCase()
 
 		if (this.state.tabActiveKey === key) {
@@ -213,6 +203,7 @@ export default class Account extends React.Component {
 		}
 
 		return <div
+			ref={this.profileRef}
 			className="accountProfile"
 			id="profile"
 		>
@@ -257,6 +248,7 @@ export default class Account extends React.Component {
 					<TabRender
 						renderKey={this.state.tabActiveKey}
 						state={this.state}
+						onTopVisibility={this.onPostListTopVisibility}
 					/>
 				</div>
 

packages/app/src/pages/account/index.less

@@ -8,6 +8,27 @@
 	width: 100%;
 	height: 100%;
 
+	&.topHidden {
+		.cover {
+			height: 0;
+			min-height: 0;
+			margin-bottom: 0;
+			outline: none;
+		}
+
+		.panels {
+			padding-top: 0;
+
+			.leftPanel {
+				transform: translate(0, 0);
+
+				.actions {
+					opacity: 0;
+				}
+			}
+		}
+	}
+
 	.cover {
 		z-index: 50;
 		position: relative;
@@ -47,6 +68,8 @@
 
 		padding-top: 20px;
 
+		height: 100%;
+
 		.leftPanel {
 			position: sticky;
 			top: 0;
@@ -60,6 +83,8 @@
 
 			transition: all 0.3s ease-in-out;
 
+			transform: translate(0, -100px);
+
 			.userCard {
 				position: sticky;
 				top: 0;
@@ -88,6 +113,14 @@
 			}
 		}
 
+		.content {
+			height: 100%;
+
+			.fade-opacity-active {
+				height: 100%;
+			}
+		}
+
 		.tabMenuWrapper {
 			position: sticky;
 			top: 0;

packages/app/src/pages/account/tabs/posts.jsx

@@ -18,14 +18,13 @@ const emptyListRender = () => {
 
 export default class UserPosts extends React.Component {
     render() {
-        return <div className="userPosts">
-            <PostsList
-                emptyListRender={emptyListRender}
-                loadFromModel={PostModel.getUserPosts}
-                loadFromModelProps={{
-                    user_id: this.props.state.user._id,
-                }}
-            />
-        </div>
+        return <PostsList
+            onTopVisibility={this.props.onTopVisibility}
+            emptyListRender={emptyListRender}
+            loadFromModel={PostModel.getUserPosts}
+            loadFromModelProps={{
+                user_id: this.props.state.user._id,
+            }}
+        />
     }
 }