minimal working virtual

package-lock.json

···
         "@tanstack/react-query-persist-client": "^5.85.6",
         "@tanstack/react-router": "^1.130.2",
         "@tanstack/react-router-devtools": "^1.131.5",
+        "@tanstack/react-virtual": "^3.13.12",
         "@tanstack/router-plugin": "^1.121.2",
         "idb-keyval": "^6.2.2",
         "jotai": "^2.13.1",
···
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
+      "integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@tanstack/router-core": {
       "version": "1.131.28",
       "resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.131.28.tgz",
···
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.7.4.tgz",
       "integrity": "sha512-F1XqZQici1Aq6WigEfcxJSml92nW+85Om8ElBMokPNg5glCYVOmPkZGIQeieYFxcPiKTfwo0MTOQpUyJtwncrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
+      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
       "license": "MIT",
       "funding": {
         "type": "github",

package.json

···
     "@tanstack/react-query-persist-client": "^5.85.6",
     "@tanstack/react-router": "^1.130.2",
     "@tanstack/react-router-devtools": "^1.131.5",
+    "@tanstack/react-virtual": "^3.13.12",
     "@tanstack/router-plugin": "^1.121.2",
     "idb-keyval": "^6.2.2",
     "jotai": "^2.13.1",

src/components/InfiniteCustomFeed.tsx

···
+/* eslint-disable react-hooks/refs */
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { useAtom } from "jotai";
 import * as React from "react";
+import { useEffect, useLayoutEffect } from "react";
+
 //import { useInView } from "react-intersection-observer";
 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
-import {
-  useQueryArbitrary,
-  useQueryIdentity,
-  useInfiniteQueryFeedSkeleton,
-} from "~/utils/useQuery";
+import { feedHeightsAtom, feedScrollIndexAtom } from "~/utils/atoms";
+import { useInfiniteQueryFeedSkeleton } from "~/utils/useQuery";
 
 interface InfiniteCustomFeedProps {
   feedUri: string;
   pdsUrl?: string;
   feedServiceDid?: string;
+  initialScrollIndex?: number;
+  //onVisibleIndexChange?: (index: number) => void;
 }
 
 export function InfiniteCustomFeed({
   feedUri,
   pdsUrl,
   feedServiceDid,
+  initialScrollIndex,
+  //onVisibleIndexChange,
 }: InfiniteCustomFeedProps) {
+  const OVERSCAN_COUNT = 10;
+  const ESTIMATE_HEIGHT = 150;
+
   const { agent } = useAuth();
   const authed = !!agent?.did;
+
+  const listRef = React.useRef<HTMLDivElement | null>(null);
+  const [offsetTop, setOffsetTop] = React.useState(0);
+  const [scrollIndexes, setScrollIndexes] = useAtom(feedScrollIndexAtom);
+  //const initialScrollIndex = scrollIndexes[feedUri];
 
   // const identityresultmaybe = useQueryIdentity(agent?.did);
   // const identity = identityresultmaybe?.data;
···
   //   }
   // }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
 
+  const allPosts = React.useMemo(() => {
+    const flattenedPosts = data?.pages.flatMap((page) => page?.feed) ?? [];
+
+    const seenUris = new Set<string>();
+
+    return flattenedPosts.filter((item) => {
+      if (!item?.post) return false;
+
+      if (seenUris.has(item.post)) {
+        return false;
+      }
+
+      seenUris.add(item.post);
+      return true;
+    });
+  }, [data]);
+
+  const [feedHeights, setFeedHeights] = useAtom(feedHeightsAtom);
+  const currentFeedCache = feedHeights[feedUri] ?? {};
+
+  const virtualizerRef = React.useRef<ReturnType<
+    typeof useWindowVirtualizer
+  > | null>(null);
+
+  const virtualizer = useWindowVirtualizer({
+    count: allPosts.length,
+    //  +
+    // (isFetchingNextPage ? 1 : 0) +
+    // (hasNextPage && !isFetchingNextPage ? 1 : 0) +
+    // (!hasNextPage ? 1 : 0) +
+    // 1,
+    estimateSize: (index) => {
+      const post = allPosts[index];
+      if (!post) return ESTIMATE_HEIGHT;
+
+      if (currentFeedCache[post.post]) {
+        return currentFeedCache[post.post];
+      }
+
+      return ESTIMATE_HEIGHT;
+    },
+    // measureElement: measureElement,
+    overscan: OVERSCAN_COUNT,
+    scrollMargin: offsetTop,
+  });
+  // React.useEffect(() => {
+  //   virtualizer.measure();
+  // }, [data]);
+
+  const measureElement = React.useCallback(
+    (node: HTMLElement | null) => {
+      if (!node) return;
+
+      virtualizer.measureElement(node);
+
+      const postUri = node.dataset.postUri;
+      const newHeight = node.offsetHeight;
+
+      if (postUri && newHeight > 0 && currentFeedCache[postUri] !== newHeight) {
+        setFeedHeights((prev) => ({
+          ...prev,
+          [feedUri]: {
+            ...prev[feedUri],
+            [postUri]: newHeight,
+          },
+        }));
+      }
+    },
+    [virtualizer, setFeedHeights, feedUri, currentFeedCache]
+  );
+
+  virtualizerRef.current = virtualizer;
+
+  useLayoutEffect(() => {
+    const update = () => {
+      if (listRef.current) {
+        setOffsetTop(listRef.current.offsetTop);
+      }
+      //if (virtualizerRef.current) {
+      //        virtualizerRef.current.measure();
+      //    }
+    };
+
+    update();
+
+    let debounceTimeout: NodeJS.Timeout;
+
+    const debouncedUpdate = () => {
+      clearTimeout(debounceTimeout);
+      debounceTimeout = setTimeout(update, 100);
+    };
+
+    window.addEventListener("resize", debouncedUpdate);
+
+    return () => {
+      window.removeEventListener("resize", debouncedUpdate);
+      clearTimeout(debounceTimeout);
+    };
+  }, []);
+
+  const hasRestoredScroll = React.useRef(false);
+  useLayoutEffect(() => {
+    if (
+      hasRestoredScroll.current ||
+      !initialScrollIndex ||
+      initialScrollIndex === 0
+    ) {
+      return;
+    }
+
+    if (initialScrollIndex < allPosts.length) {
+      console.log(`Restoring scroll to index: ${initialScrollIndex}`);
+      virtualizer.scrollToIndex(initialScrollIndex, {
+        align: "start",
+        behavior: "auto",
+      });
+      hasRestoredScroll.current = true;
+    }
+  }, [initialScrollIndex, allPosts.length, virtualizer]);
+
+  // React.useEffect(() => {
+  //   const handleScroll = () => {
+  //     const topVisibleItem = virtualizer.getVirtualItems()[0];
+  //     if (topVisibleItem && onVisibleIndexChange) {
+  //       onVisibleIndexChange(topVisibleItem.index);
+  //     }
+  //   };
+
+  //   window.addEventListener('scroll', handleScroll, { passive: true });
+  //   return () => window.removeEventListener('scroll', handleScroll);
+  // }, [virtualizer, onVisibleIndexChange]);
+
+  useEffect(() => {
+    return () => {
+      const topVisibleItem = virtualizer.getVirtualItems()[OVERSCAN_COUNT];
+
+      if (topVisibleItem) {
+        console.log(
+          `Saving final scroll index ${topVisibleItem.index} for feed ${feedUri}`
+        );
+        setScrollIndexes((prev) => ({
+          ...prev,
+          [feedUri]: topVisibleItem.index,
+        }));
+      }
+    };
+  }, [virtualizer, feedUri, setScrollIndexes]);
+
   if (isLoading) {
     return <div className="p-4 text-center text-gray-500">Loading feed...</div>;
   }
···
       <div className="p-4 text-center text-red-500">Error: {error.message}</div>
     );
   }
-
-  const allPosts =
-    data?.pages.flatMap((page) => {
-      if (page) return page.feed;
-    }) ?? [];
 
   if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) {
     return (
···
     );
   }
 
+  //if (offsetTop === 0) {
+  //   return <div ref={listRef}>Calculating...</div>;
+  //}
+
   return (
     <>
-      {allPosts.map((item, i) => {
-        if (item)
-          return (
-            <UniversalPostRendererATURILoader
-              key={item.post || i}
-              atUri={item.post}
-              feedviewpost={true}
-              repostedby={!!item.reason?.$type && (item.reason as any)?.repost}
-            />
-          );
-      })}
+      <div ref={listRef}>
+        <div
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative",
+          }}
+        >
+          {virtualizer.getVirtualItems().map((virtualItem) => {
+            const item = allPosts[virtualItem.index];
+            const i = virtualItem.index;
+            if (item)
+              return (
+                <UniversalPostRendererATURILoader
+                  key={item.post || i}
+                  atUri={item.post}
+                  dataIndexPropPass={i}
+                  feedviewpost={true}
+                  ref={measureElement}
+                  repostedby={
+                    !!item.reason?.$type && (item.reason as any)?.repost
+                  }
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    //height: `${item.size}px`,
+                    transform: `translateY(${virtualItem.start - offsetTop}px)`,
+                  }}
+                />
+              );
+          })}
+        </div>
+      </div>
+
       {/* allPosts?: {allPosts ? "true" : "false"}
       hasNextPage?: {hasNextPage ? "true" : "false"}
       isFetchingNextPage?: {isFetchingNextPage ? "true" : "false"} */}
···
         className="sticky lg:bottom-6 bottom-24 ml-4 w-[42px] h-[42px] z-10 bg-gray-500 hover:bg-gray-600 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:bg-gray-400 disabled:cursor-not-allowed"
         aria-label="Refresh feed"
       >
-        {isRefetching ? <RefreshIcon className="h-6 w-6 animate-spin" /> : <RefreshIcon className="h-6 w-6" />}
+        {isRefetching ? (
+          <RefreshIcon className="h-6 w-6 animate-spin" />
+        ) : (
+          <RefreshIcon className="h-6 w-6" />
+        )}
       </button>
     </>
   );
···
       d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"
     ></path>
   </svg>
-);
+);

src/components/UniversalPostRenderer.tsx

···
   bottomBorder?: boolean;
   feedviewpost?: boolean;
   repostedby?: string;
+  style?: React.CSSProperties;
+  ref?: React.Ref<HTMLDivElement>;
+  dataIndexPropPass?: number;
 }
 
 // export async function cachedGetRecord({
···
   bottomBorder = true,
   feedviewpost = false,
   repostedby,
+  style,
+  ref,
+  dataIndexPropPass,
 }: UniversalPostRendererATURILoaderProps) {
   // /*mass comment*/ console.log("atUri", atUri);
   //const { get, set } = usePersistentStore();
···
       bottomBorder={bottomBorder}
       feedviewpost={feedviewpost}
       repostedby={repostedby}
+      style={style}
+      ref={ref}
+      dataIndexPropPass={dataIndexPropPass}
     />
   );
 }
···
   bottomBorder = true,
   feedviewpost = false,
   repostedby,
+  style,
+  ref,
+  dataIndexPropPass,
 }: {
   postRecord: any;
   profileRecord: any;
···
   bottomBorder?: boolean;
   feedviewpost?: boolean;
   repostedby?: string;
+  style?: React.CSSProperties;
+  ref?: React.Ref<HTMLDivElement>;
+  dataIndexPropPass?: number;
 }) {
   // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`);
   const navigate = useNavigate();
···
         //extraOptionalItemInfo={{reply: postRecord?.value?.reply as AppBskyFeedDefs.ReplyRef, post: fakepost}}
         feedviewpostreplyhandle={feedviewpostreplyhandle}
         repostedby={feedviewpostrepostedbyhandle}
+        style={style}
+        ref={ref}
+        dataIndexPropPass={dataIndexPropPass}
       />
     </>
   );
···
   feedviewpostreplyhandle,
   depth = 0,
   repostedby,
+  style,
+  ref,
+  dataIndexPropPass,
 }: {
   post: PostView;
   // optional for now because i havent ported every use to this yet
···
   feedviewpostreplyhandle?: string;
   depth?: number;
   repostedby?: string;
+  style?: React.CSSProperties;
+  ref?: React.Ref<HTMLDivElement>;
+  dataIndexPropPass?: number;
 }) {
   const navigate = useNavigate();
   const [likedPosts, setLikedPosts] = useAtom(likedPostsAtom);
···
   /* fuck you */
   const isMainItem = false;
   const setMainItem = (any: any) => {};
+  // eslint-disable-next-line react-hooks/refs
+  console.log("Received ref in UniversalPostRenderer:", ref);
   return (
+    <div ref={ref} style={style} data-index={dataIndexPropPass}>
     <div
+      //ref={ref}
       key={salt + "-" + (post.uri || emergencySalt)}
       onClick={
         isMainItem
···
                 }
             : undefined
       }
-      style={{
+      style={
+        {
+        //...style,
         //border: "1px solid #e1e8ed",
         //borderRadius: 12,
         opacity: "1 !important",
···
           />
         </div>
       </div>
+    </div>
     </div>
   );
 }

src/routes/index.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
 import { useAtom } from "jotai";
 import * as React from "react";
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect } from "react";
 
 import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
 import {
   agentAtom,
   authedAtom,
-  feedScrollPositionsAtom,
+  feedScrollIndexAtom,
   selectedFeedUriAtom,
   store,
 } from "~/utils/atoms";
 //import { usePersistentStore } from "~/providers/PersistentStoreProvider";
 import {
-  constructArbitraryQuery,
-  constructIdentityQuery,
-  constructInfiniteFeedSkeletonQuery,
-  constructPostQuery,
+  //constructArbitraryQuery,
+  //constructIdentityQuery,
+  //constructInfiniteFeedSkeletonQuery,
+  //constructPostQuery,
   useQueryArbitrary,
   useQueryIdentity,
   useQueryPreferences,
 } from "~/utils/useQuery";
 
 export const Route = createFileRoute("/")({
-  loader: async ({ context }) => {
-    const { queryClient } = context;
-    const atomauth = store.get(authedAtom);
-    const atomagent = store.get(agentAtom);
+  // loader: async ({ context }) => {
+  //   const { queryClient } = context;
+  //   const atomauth = store.get(authedAtom);
+  //   const atomagent = store.get(agentAtom);
 
-    let identitypds: string | undefined;
-    const initialselectedfeed = store.get(selectedFeedUriAtom);
-    if (atomagent && atomauth && atomagent?.did) {
-      const identityopts = constructIdentityQuery(atomagent.did);
-      const identityresultmaybe =
-        await queryClient.ensureQueryData(identityopts);
-      identitypds = identityresultmaybe?.pds;
-    }
+  //   let identitypds: string | undefined;
+  //   const initialselectedfeed = store.get(selectedFeedUriAtom);
+  //   if (atomagent && atomauth && atomagent?.did) {
+  //     const identityopts = constructIdentityQuery(atomagent.did);
+  //     const identityresultmaybe =
+  //       await queryClient.ensureQueryData(identityopts);
+  //     identitypds = identityresultmaybe?.pds;
+  //   }
 
-    const arbitraryopts = constructArbitraryQuery(
-      initialselectedfeed ??
-        "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot"
-    );
-    const feedGengetrecordquery =
-      await queryClient.ensureQueryData(arbitraryopts);
-    const feedServiceDid = (feedGengetrecordquery?.value as any)?.did;
-    //queryClient.ensureInfiniteQueryData()
+  //   const arbitraryopts = constructArbitraryQuery(
+  //     initialselectedfeed ??
+  //       "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot"
+  //   );
+  //   const feedGengetrecordquery =
+  //     await queryClient.ensureQueryData(arbitraryopts);
+  //   const feedServiceDid = (feedGengetrecordquery?.value as any)?.did;
+  //   //queryClient.ensureInfiniteQueryData()
 
-    const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery({
-      feedUri:
-        initialselectedfeed ??
-        "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot",
-      agent: atomagent ?? undefined,
-      isAuthed: atomauth ?? false,
-      pdsUrl: identitypds,
-      feedServiceDid: feedServiceDid,
-    });
+  //   const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery({
+  //     feedUri:
+  //       initialselectedfeed ??
+  //       "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot",
+  //     agent: atomagent ?? undefined,
+  //     isAuthed: atomauth ?? false,
+  //     pdsUrl: identitypds,
+  //     feedServiceDid: feedServiceDid,
+  //   });
 
-    const res = await queryClient.ensureInfiniteQueryData({
-      queryKey,
-      queryFn,
-      initialPageParam: undefined as never,
-      getNextPageParam: (lastPage: any) => lastPage.cursor as null | undefined,
-      staleTime: Infinity,
-      //refetchOnWindowFocus: false,
-      //enabled: true,
-    });
-    await Promise.all(
-      res.pages.map(async (page) => {
-        await Promise.all(
-          page.feed.map(async (feedviewpost) => {
-            if (!feedviewpost.post) return;
-            // /*mass comment*/ console.log("preloading: ", feedviewpost.post);
-            const opts = constructPostQuery(feedviewpost.post);
-            try {
-              await queryClient.ensureQueryData(opts);
-            } catch (e) {
-              // /*mass comment*/ console.log(" failed:", e);
-            }
-          })
-        );
-      })
-    );
-  },
+  //   const res = await queryClient.ensureInfiniteQueryData({
+  //     queryKey,
+  //     queryFn,
+  //     initialPageParam: undefined as never,
+  //     getNextPageParam: (lastPage: any) => lastPage.cursor as null | undefined,
+  //     staleTime: Infinity,
+  //     //refetchOnWindowFocus: false,
+  //     //enabled: true,
+  //   });
+  //   await Promise.all(
+  //     res.pages.map(async (page) => {
+  //       await Promise.all(
+  //         page.feed.map(async (feedviewpost) => {
+  //           if (!feedviewpost.post) return;
+  //           // /*mass comment*/ console.log("preloading: ", feedviewpost.post);
+  //           const opts = constructPostQuery(feedviewpost.post);
+  //           try {
+  //             await queryClient.ensureQueryData(opts);
+  //           } catch (e) {
+  //             // /*mass comment*/ console.log(" failed:", e);
+  //           }
+  //         })
+  //       );
+  //     })
+  //   );
+  // },
   component: Home,
   pendingComponent: PendingHome,
 });
···
   //   };
   // }, [authed, agent, loadering, selectedFeed, get, set]);
 
-  const [scrollPositions, setScrollPositions] = useAtom(
-    feedScrollPositionsAtom
-  );
+  // const [scrollPositions, setScrollPositions] = useAtom(
+  //   feedScrollPositionsAtom
+  // );
 
-  const scrollRef = React.useRef<Record<string, number>>({});
+  const [scrollIndexes] = useAtom(feedScrollIndexAtom);
+
+  //const latestVisibleIndexRef = React.useRef(0);
+
+  // const handleVisibleIndexChange = React.useCallback((index: number) => {
+  //   latestVisibleIndexRef.current = index;
+  // }, []);
 
-  useEffect(() => {
-    const onScroll = () => {
-      //if (!selectedFeed) return;
-      scrollRef.current[selectedFeed ?? "null"] = window.scrollY;
-    };
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
-  }, [selectedFeed]);
-  const [donerestored, setdonerestored] = React.useState(false);
+  // React.useEffect(() => {
+  //   // This return function is the cleanup effect.
+  //   return () => {
+  //     if (selectedFeed) {
+  //       console.log(`Saving scroll index ${latestVisibleIndexRef.current} for feed ${selectedFeed}`);
+  //       setScrollIndexes((prev) => ({
+  //         ...prev,
+  //         [selectedFeed]: latestVisibleIndexRef.current,
+  //       }));
+  //     }
+  //   };
+  // }, [selectedFeed, setScrollIndexes]);
+
+  // useEffect(() => {
+  //   const onScroll = () => {
+  //     //if (!selectedFeed) return;
+  //     scrollRef.current[selectedFeed ?? "null"] = window.scrollY;
+  //   };
+  //   window.addEventListener("scroll", onScroll, { passive: true });
+  //   return () => window.removeEventListener("scroll", onScroll);
+  // }, [selectedFeed]);
+  // const [donerestored, setdonerestored] = React.useState(false);
 
-  useEffect(() => {
-    return () => {
-      if (!donerestored) return;
-      // /*mass comment*/ console.log("FEEDSCROLLSHIT saving at uhhh: ", scrollRef.current);
-      //if (!selectedFeed) return;
-      setScrollPositions((prev) => ({
-        ...prev,
-        [selectedFeed ?? "null"]:
-          scrollRef.current[selectedFeed ?? "null"] ?? 0,
-      }));
-    };
-  }, [selectedFeed, setScrollPositions, donerestored]);
+  // useEffect(() => {
+  //   return () => {
+  //     if (!donerestored) return;
+  //     // /*mass comment*/ console.log("FEEDSCROLLSHIT saving at uhhh: ", scrollRef.current);
+  //     //if (!selectedFeed) return;
+  //     setScrollPositions((prev) => ({
+  //       ...prev,
+  //       [selectedFeed ?? "null"]:
+  //         scrollRef.current[selectedFeed ?? "null"] ?? 0,
+  //     }));
+  //   };
+  // }, [selectedFeed, setScrollPositions, donerestored]);
 
-  const [restoringScrollPosition, setRestoringScrollPosition] =
-    React.useState(false);
+  // const [restoringScrollPosition, setRestoringScrollPosition] =
+  //   React.useState(false);
 
-  useLayoutEffect(() => {
-    setRestoringScrollPosition(true);
-    const savedPosition = scrollPositions[selectedFeed ?? "null"] ?? 0;
+  // useLayoutEffect(() => {
+  //   setRestoringScrollPosition(true);
+  //   const savedPosition = scrollPositions[selectedFeed ?? "null"] ?? 0;
 
-    const raf = requestAnimationFrame(() => {
-      // setRestoringScrollPosition(true);
-      // raf = requestAnimationFrame(() => {
-      //   window.scrollTo({ top: savedPosition, behavior: "instant" });
-      //   setRestoringScrollPosition(false);
-      //   setdonerestored(true);
-      // });
-      window.scrollTo({ top: savedPosition, behavior: "instant" });
-      setRestoringScrollPosition(false);
-      setdonerestored(true);
-    });
+  //   const raf = requestAnimationFrame(() => {
+  //     // setRestoringScrollPosition(true);
+  //     // raf = requestAnimationFrame(() => {
+  //     //   window.scrollTo({ top: savedPosition, behavior: "instant" });
+  //     //   setRestoringScrollPosition(false);
+  //     //   setdonerestored(true);
+  //     // });
+  //     window.scrollTo({ top: savedPosition, behavior: "instant" });
+  //     setRestoringScrollPosition(false);
+  //     setdonerestored(true);
+  //   });
 
-    return () => cancelAnimationFrame(raf);
-  }, [selectedFeed, scrollPositions]);
+  //   return () => cancelAnimationFrame(raf);
+  // }, [selectedFeed, scrollPositions]);
 
   const feedGengetrecordquery = useQueryArbitrary(selectedFeed ?? undefined);
   const feedServiceDid = (feedGengetrecordquery?.data?.value as any)?.did;
···
   const isReadyForAuthedFeed =
     authed && agent && identity?.pds && feedServiceDid;
   const isReadyForUnauthedFeed = !authed && selectedFeed;
+
+  const savedIndex = selectedFeed ? scrollIndexes[selectedFeed] : 0;
 
   return (
     <div className="relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
···
           feedUri={selectedFeed!}
           pdsUrl={identity?.pds}
           feedServiceDid={feedServiceDid}
+          initialScrollIndex={savedIndex}
+          //onVisibleIndexChange={handleVisibleIndexChange}
         />
       ) : (
         <div className="p-4 text-center text-gray-500">

src/utils/atoms.ts

···
 
 //export const feedScrollPositionsAtom = atom<Record<string, number>>({});
 
+/**
+ * @deprecated use the Tanstack Virtual index thanks
+ */
 export const feedScrollPositionsAtom = atomWithStorage<Record<string, number>>(
   'feedscrollpositions',
+  {}
+);
+
+export const feedScrollIndexAtom = atomWithStorage<Record<string, number>>('feedScrollIndexes',{});
+
+export const feedHeightsAtom = atomWithStorage<Record<string, Record<string, number>>>(
+  'feedPostHeights',
   {}
 );