move infinite scroll marker higher for feed layout

daostack · Oct 30, 2023 · 8808629 · 8808629
1 parent 40f18ef
commit 8808629
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss b/src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss
@@ -1,6 +1,7 @@
 @import "../../../../styles/sizes";
 
 .content {
+  position: relative;
   flex: 1;
   padding: 0 1.5rem;
   display: flex;
@@ -17,6 +18,11 @@
   justify-content: center;
 }
 
+.infiniteScrollMarker {
+  position: absolute;
+  bottom: 50rem;
+}
+
 .emptyText {
   margin: 0;
   font-weight: 500;

diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx
@@ -653,6 +653,11 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
             {topContent}
             {isContentEmpty && <p className={styles.emptyText}>{emptyText}</p>}
             <InfiniteScroll
+              markerClassName={
+                allFeedItems && allFeedItems.length > 7
+                  ? styles.infiniteScrollMarker
+                  : ""
+              }
               onFetchNext={onFetchNext}
               isLoading={loading}
               loaderDelay={LOADER_APPEARANCE_DELAY}

diff --git a/src/shared/ui-kit/InfiniteScroll/InfiniteScroll.tsx b/src/shared/ui-kit/InfiniteScroll/InfiniteScroll.tsx
@@ -6,11 +6,13 @@ import styles from "./InfiniteScroll.module.scss";
 interface InfiniteScrollProps {
   isLoading: boolean;
   loaderDelay?: number;
+  markerClassName?: string;
   onFetchNext: () => void;
 }
 
 const InfiniteScroll: FC<InfiniteScrollProps> = (props) => {
-  const { isLoading, loaderDelay, onFetchNext, children } = props;
+  const { isLoading, loaderDelay, markerClassName, onFetchNext, children } =
+    props;
   const [isInnerLoading, setIsInnerLoading] = useState(isLoading);
   const markerRef = useRef<HTMLDivElement>(null);
   const isMarkerOnScreen = useIntersectionObserver(markerRef.current);
@@ -39,7 +41,7 @@ const InfiniteScroll: FC<InfiniteScrollProps> = (props) => {
   return (
     <>
       {children}
-      <div ref={markerRef} />
+      <div className={markerClassName} ref={markerRef} />
       {isLoading && (
         <div className={styles.loaderWrapper}>
           <Loader delay={loaderDelay} />