bug: try improve loading performance

src/Element/LoadMore.tsx

@@ -1,13 +1,22 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useInView } from "react-intersection-observer";
 
-export default function LoadMore({ onLoadMore }: { onLoadMore: () => void }) {
+export default function LoadMore({ onLoadMore, shouldLoadMore }: { onLoadMore: () => void, shouldLoadMore: boolean }) {
     const { ref, inView } = useInView();
+    const [tick, setTick] = useState<number>(0);
 
     useEffect(() => {
-        if (inView === true) {
+        if (inView === true && shouldLoadMore === true) {
             onLoadMore();
         }
-    }, [inView]);
+    }, [inView, shouldLoadMore, tick]);
+
+    useEffect(() => {
+        let t = setInterval(() => {
+            setTick(x => x += 1);
+        }, 500);
+        return () => clearInterval(t);
+    }, []);
+
     return <div ref={ref} className="mb10">Loading...</div>;
 }

src/Element/Note.css

@@ -1,3 +1,7 @@
+.note {
+  min-height: 110px;
+}
+
 .note.thread {
   border-bottom: none;
 }

src/Element/Timeline.tsx

@@ -7,7 +7,7 @@ import LoadMore from "Element/LoadMore";
 import Note from "Element/Note";
 import NoteReaction from "Element/NoteReaction";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFastForward, faForward } from "@fortawesome/free-solid-svg-icons";
+import { faForward } from "@fortawesome/free-solid-svg-icons";
 
 export interface TimelineProps {
     postsOnly: boolean,
@@ -55,7 +55,7 @@ export default function Timeline({ subject, postsOnly = false, method }: Timelin
                 Show latest {latestFeed.length - 1} notes
             </div>)}
             {mainFeed.map(eventElement)}
-            {mainFeed.length > 0 ? <LoadMore onLoadMore={loadMore} /> : null}
+            <LoadMore onLoadMore={loadMore} shouldLoadMore={main.end}/>
         </>
     );
 }