From 25d4831aac40f5438d91d8a303af930e0d97cb2d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 13 Apr 2021 18:29:38 +0800
Subject: ...

---
 .../views/timeline-common/TimelinePagedPostListView.tsx | 17 ++++-------------
 .../app/views/timeline-common/TimelinePostListView.tsx  |  9 +++------
 .../src/app/views/timeline-common/TimelinePostView.tsx  | 17 ++++++++++++++++-
 .../src/app/views/timeline-common/timeline-common.sass  |  6 +-----
 4 files changed, 24 insertions(+), 25 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
index 8efdb034..b44a8ef6 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
@@ -2,9 +2,7 @@ import React from "react";
 
 import { HttpTimelinePostInfo } from "@/http/timeline";
 
-import TimelinePostListView, {
-  TimelinePostListViewProps,
-} from "./TimelinePostListView";
+import TimelinePostListView from "./TimelinePostListView";
 
 export interface TimelinePagedPostListViewProps {
   className?: string;
@@ -21,16 +19,9 @@ const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
   const [lastViewCount, setLastViewCount] = React.useState<number>(10);
 
   const viewingPosts = React.useMemo(() => {
-    const p: TimelinePostListViewProps["posts"] =
-      lastViewCount >= posts.length
-        ? posts.slice()
-        : posts.slice(-lastViewCount);
-
-    for (let i = 0; i < p.length; i++) {
-      p[p.length - i - 1].enterDelay = (i % 10) * 0.4;
-    }
-
-    return p;
+    return lastViewCount >= posts.length
+      ? posts.slice()
+      : posts.slice(-lastViewCount);
   }, [posts, lastViewCount]);
 
   React.useEffect(() => {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
index 4cffe593..bc7b72ad 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
@@ -17,7 +17,7 @@ function dateEqual(left: Date, right: Date): boolean {
 export interface TimelinePostListViewProps {
   className?: string;
   style?: React.CSSProperties;
-  posts: (HttpTimelinePostInfo & { enterDelay?: number })[];
+  posts: HttpTimelinePostInfo[];
   onReload: () => void;
 }
 
@@ -27,12 +27,12 @@ const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
   const groupedPosts = React.useMemo<
     {
       date: Date;
-      posts: (HttpTimelinePostInfo & { index: number; enterDelay?: number })[];
+      posts: (HttpTimelinePostInfo & { index: number })[];
     }[]
   >(() => {
     const result: {
       date: Date;
-      posts: (HttpTimelinePostInfo & { index: number; enterDelay?: number })[];
+      posts: (HttpTimelinePostInfo & { index: number })[];
     }[] = [];
     let index = 0;
     for (const post of posts) {
@@ -65,9 +65,6 @@ const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
                   post={post}
                   current={posts.length - 1 === post.index}
                   onDeleted={onReload}
-                  cardStyle={{
-                    animationDelay: `${post.enterDelay ?? 0}s`,
-                  }}
                 />
               );
             })}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
index 4cafdaa0..4f9c6e97 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -30,6 +30,21 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
   ] = React.useState<boolean>(false);
   const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const cardRef = React.useRef<HTMLDivElement>(null!);
+  React.useEffect(() => {
+    const cardIntersectionObserver = new IntersectionObserver(([e]) => {
+      if (e.isIntersecting) {
+        cardRef.current.style.animationName = "timeline-post-enter";
+      }
+    });
+    cardIntersectionObserver.observe(cardRef.current);
+
+    return () => {
+      cardIntersectionObserver.disconnect();
+    };
+  }, []);
+
   return (
     <div
       id={`timeline-post-${post.id}`}
@@ -37,7 +52,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
       style={style}
     >
       <TimelineLine center="node" current={current} />
-      <div className="timeline-item-card" style={cardStyle}>
+      <div ref={cardRef} className="timeline-item-card" style={cardStyle}>
         {post.editable ? (
           <i
             className="bi-chevron-down text-info icon-button float-right"
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 683a4282..e570b4b4 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -42,14 +42,10 @@ $timeline-line-color-current: #36c2e6
   from
     transform: translate(0, -100vh)
 
-  to
-
 @keyframes timeline-top-loading-enter
   from
     transform: translate(0, -100%)
 
-  to
-
 @keyframes timeline-post-enter
   from
     transform: translate(0, -100%)
@@ -153,7 +149,7 @@ $timeline-line-color-current: #36c2e6
   position: relative
   padding: 0.3em 0.5em 1em 4em
   transition: background 0.5s, padding-left 0.5s
-  animation: 0.4s forwards timeline-post-enter
+  animation: 0.4s forwards
   opacity: 0
 
   @include media-breakpoint-down(sm)
-- 
cgit v1.2.3