Merge pull request #2273 from daostack/feature/CW-2269-bg-loading

Background Loading next streams and their messages in inbox and spaces #2269

src/pages/commonFeed/CommonFeed.tsx

@@ -161,6 +161,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     loading: areCommonFeedItemsLoading,
     hasMore: hasMoreCommonFeedItems,
     fetch: fetchCommonFeedItems,
+    batchNumber,
   } = useCommonFeedItems(commonId, commonFeedItemIdsForNotListening);
 
   const {
@@ -508,6 +509,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
         topFeedItems={topFeedItems}
         feedItems={commonFeedItems}
         loading={areCommonFeedItemsLoading}
+        batchNumber={batchNumber}
         onFetchNext={fetchMoreCommonFeedItems}
         renderFeedItemBaseContent={renderFeedItemBaseContent}
         onFeedItemUpdate={handleFeedItemUpdate}

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;

src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx

@@ -79,6 +79,7 @@ import {
   MobileProfile,
   SplitView,
 } from "./components";
+import { BATCHES_AMOUNT_TO_PRELOAD } from "./constants";
 import { useUserForProfile } from "./hooks";
 import {
   checkShouldAutoOpenPreview,
@@ -114,6 +115,7 @@ interface FeedLayoutProps {
   topFeedItems?: FeedLayoutItem[];
   loading: boolean;
   shouldHideContent?: boolean;
+  batchNumber?: number;
   onFetchNext: (feedItemId?: string) => void;
   renderFeedItemBaseContent: (props: FeedItemBaseContentProps) => ReactNode;
   renderChatChannelItem?: (props: ChatChannelFeedLayoutItemProps) => ReactNode;
@@ -153,6 +155,7 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     topFeedItems = [],
     loading,
     shouldHideContent = false,
+    batchNumber,
     onFetchNext,
     renderFeedItemBaseContent,
     renderChatChannelItem,
@@ -603,6 +606,16 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     }
   }, [isTabletView, shouldAutoExpandItem, activeFeedItemId]);
 
+  useEffect(() => {
+    if (
+      batchNumber &&
+      batchNumber >= 1 &&
+      batchNumber <= BATCHES_AMOUNT_TO_PRELOAD
+    ) {
+      onFetchNext();
+    }
+  }, [batchNumber]);
+
   useImperativeHandle(
     ref,
     () => ({
@@ -640,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}

src/pages/commonFeed/components/FeedLayout/constants/index.ts

@@ -0,0 +1 @@
+export const BATCHES_AMOUNT_TO_PRELOAD = 2;

src/pages/inbox/BaseInbox.tsx

@@ -88,6 +88,7 @@ const InboxPage: FC<InboxPageProps> = (props) => {
     loading: areInboxItemsLoading,
     hasMore: hasMoreInboxItems,
     fetch: fetchInboxItems,
+    batchNumber,
   } = useInboxItems(feedItemIdsForNotListening, {
     unread: queryParams.unread === "true",
   });
@@ -257,6 +258,7 @@ const InboxPage: FC<InboxPageProps> = (props) => {
         feedItems={inboxItems}
         loading={areInboxItemsLoading || !user}
         shouldHideContent={!user}
+        batchNumber={batchNumber}
         onFetchNext={fetchMoreInboxItems}
         renderFeedItemBaseContent={renderFeedItemBaseContent}
         renderChatChannelItem={renderChatChannelItem}

src/shared/hooks/useCases/useCommonFeedItems.ts

@@ -3,7 +3,8 @@ import { useDispatch, useSelector } from "react-redux";
 import { CommonFeedService } from "@/services";
 import { commonActions, FeedItems, selectFeedItems } from "@/store/states";
 
-interface Return extends Pick<FeedItems, "data" | "loading" | "hasMore"> {
+interface Return
+  extends Pick<FeedItems, "data" | "loading" | "hasMore" | "batchNumber"> {
   fetch: (feedItemId?: string) => void;
 }
 

src/shared/hooks/useCases/useInboxItems.ts

@@ -13,7 +13,8 @@ import { FeedLayoutItemWithFollowData } from "@/shared/interfaces";
 import { FeedItemFollow, FeedItemFollowWithMetadata } from "@/shared/models";
 import { inboxActions, InboxItems, selectInboxItems } from "@/store/states";
 
-interface Return extends Pick<InboxItems, "data" | "loading" | "hasMore"> {
+interface Return
+  extends Pick<InboxItems, "data" | "loading" | "hasMore" | "batchNumber"> {
   fetch: () => void;
 }
 

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} />

src/store/states/common/actions.ts

@@ -119,7 +119,7 @@ export const getFeedItems = createAsyncAction(
     feedItemId?: string;
     limit?: number;
   },
-  Omit<FeedItems, "loading">,
+  Omit<FeedItems, "loading" | "batchNumber">,
   Error,
   string
 >();

src/store/states/common/reducer.ts

@@ -15,6 +15,7 @@ const initialFeedItems: FeedItems = {
   hasMore: false,
   firstDocTimestamp: null,
   lastDocTimestamp: null,
+  batchNumber: 0,
 };
 
 const initialPinnedFeedItems: PinnedFeedItems = {
@@ -428,6 +429,7 @@ export const reducer = createReducer<CommonState, Action>(initialState)
         data:
           payloadData && (nextState.feedItems.data || []).concat(payloadData),
         loading: false,
+        batchNumber: nextState.feedItems.batchNumber + 1,
       };
     }),
   )

src/store/states/common/types.ts

@@ -18,6 +18,7 @@ export interface FeedItems {
   hasMore: boolean;
   firstDocTimestamp: Timestamp | null;
   lastDocTimestamp: Timestamp | null;
+  batchNumber: number;
 }
 
 export interface PinnedFeedItems {

src/store/states/inbox/actions.ts

@@ -16,7 +16,7 @@ export const getInboxItems = createAsyncAction(
     limit?: number;
     unread?: boolean;
   },
-  Omit<InboxItems, "loading">,
+  Omit<InboxItems, "loading" | "batchNumber">,
   Error,
   string
 >();

src/store/states/inbox/reducer.ts

@@ -20,6 +20,7 @@ const initialInboxItems: InboxItems = {
   hasMore: false,
   firstDocTimestamp: null,
   lastDocTimestamp: null,
+  batchNumber: 0,
 };
 
 const initialState: InboxState = {
@@ -432,6 +433,7 @@ export const reducer = createReducer<InboxState, Action>(initialState)
         ...payload,
         data: payloadData && (nextState.items.data || []).concat(payloadData),
         loading: false,
+        batchNumber: nextState.items.batchNumber + 1,
       };
     }),
   )

src/store/states/inbox/types.ts

@@ -10,6 +10,7 @@ export interface InboxItems {
   hasMore: boolean;
   firstDocTimestamp: Timestamp | null;
   lastDocTimestamp: Timestamp | null;
+  batchNumber: number;
 }
 
 export interface InboxState {