move loadMore button to TimelineRenderer

packages/app/src/Components/Event/LoadMore.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import { FormattedMessage } from "react-intl";
+
+interface ShowMoreProps {
+  text?: string;
+  className?: string;
+  onClick: () => void;
+}
+
+const LoadMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
+  return (
+    <button type="button" className={className} onClick={onClick}>
+      {text || <FormattedMessage defaultMessage="Load more" id="00LcfG" />}
+    </button>
+  );
+};
+
+export default LoadMore;
+
+export function AutoLoadMore({ text, onClick, className }: ShowMoreProps) {
+  const { ref, inView } = useInView({ rootMargin: "2000px" });
+
+  useEffect(() => {
+    if (inView) {
+      onClick();
+    }
+  }, [inView]);
+
+  return (
+    <div ref={ref}>
+      <LoadMore onClick={onClick} text={text} className={className} />
+    </div>
+  );
+}

packages/app/src/Components/Event/ShowMore.tsx

@@ -1,38 +0,0 @@
-import classNames from "classnames";
-import { useEffect } from "react";
-import { useInView } from "react-intersection-observer";
-import { FormattedMessage } from "react-intl";
-
-interface ShowMoreProps {
-  text?: string;
-  className?: string;
-  onClick: () => void;
-}
-
-const ShowMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
-  return (
-    <div className="show-more-container">
-      <button type="button" className={classNames("show-more", className)} onClick={onClick}>
-        {text || <FormattedMessage defaultMessage="Show More" id="O8Z8t9" />}
-      </button>
-    </div>
-  );
-};
-
-export default ShowMore;
-
-export function AutoShowMore({ text, onClick, className }: ShowMoreProps) {
-  const { ref, inView } = useInView({ rootMargin: "2000px" });
-
-  useEffect(() => {
-    if (inView) {
-      onClick();
-    }
-  }, [inView]);
-
-  return (
-    <div ref={ref}>
-      <ShowMore onClick={onClick} text={text} className={className} />
-    </div>
-  );
-}

packages/app/src/Components/Event/Thread.css

@@ -31,16 +31,6 @@
   border-radius: 0;
 }
 
-.thread-container .show-more {
-  background: var(--gray-superdark);
-  padding-left: 76px;
-  width: 100%;
-  text-align: left;
-  border-radius: 0;
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
 .subthread-container {
   position: relative;
 }