track feeds cache states for skeleton

src/components/views/All.jsx

@@ -48,6 +48,8 @@ const All = () => {
   const {
     defaultSubplebbits,
     editedComment,
+    feedCacheStates,
+    setFeedCacheState,
     isSettingsOpen, setIsSettingsOpen,
     setModeratingCommentCid,
     selectedAddress,
@@ -108,20 +110,26 @@ const All = () => {
   const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
 
-  const setSelectedThreadCid = (cid) => {
+  const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
-    selectedThreadCidRef.current = cid;
+  const isFeedCached = feedCacheStates['all'];
-  }
 
   useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
 
   const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
-  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
+  const { feed, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
   const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'active'});
   const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
 
   const stateString = useFeedStateString(subplebbits);
   
 
+  useEffect(() => {
+    if (feed.length) {
+      setFeedCacheState('all', true);
+    }
+  }, [feed.length, setFeedCacheState]);
+
+
   const handleThumbnailClick = (index, isMobile=false) => {
     if (isMobile) {
       setIsMobileThumbnailClicked(prevState => ({
@@ -489,7 +497,7 @@ const All = () => {
   useEffect(() => {
     const setLastVirtuosoState = () => {
       virtuosoRef.current?.getState((snapshot) => {
-        if (snapshot?.ranges?.length) {
+        if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) {
           lastVirtuosoStates['all'] = snapshot;
         }
       });
@@ -2225,8 +2233,8 @@ const All = () => {
                 initialScrollTop={lastVirtuosoState?.scrollTop}
                 endReached={tryLoadMore}
                 useWindowScroll={true}
-                components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
+                components={{Footer: () => {return isFeedCached ? null : <PostLoader />}}}
-              />
+                />
             ) : (
               <PostLoader />
             )}

src/components/views/Board.jsx

@@ -52,6 +52,8 @@ const Board = () => {
     setChallengesArray,
     defaultSubplebbits,
     editedComment,
+    feedCacheStates,
+    setFeedCacheState,
     setIsAuthorDelete,
     setIsAuthorEdit,
     setIsCaptchaOpen,
@@ -106,7 +108,7 @@ const Board = () => {
   const selectedThreadCidRef = useRef(null);
   const virtuosoRef = useRef();
 
-  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
+  const { feed, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
   const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
   const stateString = useStateString(subplebbit);
@@ -134,11 +136,19 @@ const Board = () => {
   const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
 
-  const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid;}
+  const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
+  const isFeedCached = feedCacheStates[selectedAddress];
 
   useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
 
 
+  useEffect(() => {
+    if (feed.length) {
+      setFeedCacheState(selectedAddress, true);
+    }
+  }, [selectedAddress, setFeedCacheState, feed.length]);
+
+
   useEffect(() => {
     if (subplebbit.roles !== undefined) { 
       const role = subplebbit.roles[account?.author.address]?.role;
@@ -653,7 +663,7 @@ const Board = () => {
   useEffect(() => {
     const setLastVirtuosoState = () => {
       virtuosoRef.current?.getState((snapshot) => {
-        if (snapshot?.ranges?.length) {
+        if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) {
           lastVirtuosoStates[selectedAddress] = snapshot;
         }
       });
@@ -662,6 +672,7 @@ const Board = () => {
 
     return () => window.removeEventListener('scroll', setLastVirtuosoState);
   }, [selectedAddress]);
+  
 
   const lastVirtuosoState = lastVirtuosoStates[selectedAddress];
 
@@ -2846,7 +2857,7 @@ const Board = () => {
                   initialScrollTop={lastVirtuosoState?.scrollTop}
                   endReached={tryLoadMore}
                   useWindowScroll={true}
-                  components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
+                  components={{Footer: () => {return isFeedCached ? null : <PostLoader />}}}
                   />
                 </>
               ) : (<PostLoader />)

src/components/views/Subscriptions.jsx

@@ -48,6 +48,8 @@ const Subscriptions = () => {
   const {
     defaultSubplebbits,
     editedComment,
+    feedCacheStates,
+    setFeedCacheState,
     isSettingsOpen, setIsSettingsOpen,
     setModeratingCommentCid,
     selectedAddress,
@@ -108,19 +110,24 @@ const Subscriptions = () => {
   const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
 
-  const setSelectedThreadCid = (cid) => {
+  const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
-    selectedThreadCidRef.current = cid;
+  const isFeedCached = feedCacheStates['subscriptions'];
-  }
   
   useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
 
-  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
+  const { feed, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
   const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
   const {subplebbits} = useSubplebbits({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
 
   const stateString = useFeedStateString(subplebbits);
   
 
+  useEffect(() => {
+    if (feed.length) {
+      setFeedCacheState('subscriptions', true);
+    }
+  }, [feed.length, setFeedCacheState]);
+
   const handleThumbnailClick = (index, isMobile=false) => {
     if (isMobile) {
       setIsMobileThumbnailClicked(prevState => ({
@@ -492,7 +499,7 @@ const Subscriptions = () => {
   useEffect(() => {
     const setLastVirtuosoState = () => {
       virtuosoRef.current?.getState((snapshot) => {
-        if (snapshot?.ranges?.length) {
+        if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) {
           lastVirtuosoStates['subscriptions'] = snapshot;
         }
       });
@@ -2236,7 +2243,7 @@ const Subscriptions = () => {
                 initialScrollTop={lastVirtuosoState?.scrollTop}
                 endReached={tryLoadMore}
                 useWindowScroll={true}
-                components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
+                components={{Footer: () => {return isFeedCached ? null : <PostLoader />}}}
               />
             )}
           </div>

src/hooks/stores/useGeneralStore.js

@@ -23,6 +23,14 @@ const useGeneralStore = create((set) => ({
   editedComment: '',
   setEditedComment: (comment) => set({ editedComment: comment }),
 
+  feedCacheStates: {},
+  setFeedCacheState: (address, isCached) => set((prev) => ({
+    feedCacheStates: {
+      ...prev.feedCacheStates,
+      [address]: isCached,
+    }
+  })),
+
   isAuthorDelete: false,
   setIsAuthorDelete: (isAuthorDelete) => set({ isAuthorDelete }),