persistent data, persistent scroll position, reload feeds, home screen loader

package-lock.json

···
       "dependencies": {
         "@atproto/api": "^0.16.6",
         "@tailwindcss/vite": "^4.0.6",
+        "@tanstack/query-sync-storage-persister": "^5.85.6",
         "@tanstack/react-devtools": "^0.2.2",
         "@tanstack/react-query": "^5.85.6",
+        "@tanstack/react-query-persist-client": "^5.85.6",
         "@tanstack/react-router": "^1.130.2",
         "@tanstack/react-router-devtools": "^1.131.5",
         "@tanstack/router-plugin": "^1.121.2",
···
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/query-persist-client-core": {
+      "version": "5.85.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.85.6.tgz",
+      "integrity": "sha512-wUdoEurIC0YCNZzR020Xcg3OsJeF4SXmEPqlNwZ6EaGKgWeNjU17hVdK+X4ZeirUm+h0muiEQx+aIQU1lk7roQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.85.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-sync-storage-persister": {
+      "version": "5.85.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-5.85.6.tgz",
+      "integrity": "sha512-Gj/p0paYsdzj3IbRn6SjMMNdjZ0nVQWszn17qbHLiu3Mt6H0b/YbLL3g9uRWcoyYcaB004RawgM0MuA+xJt5iw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.85.6",
+        "@tanstack/query-persist-client-core": "5.85.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/react-devtools": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@tanstack/react-devtools/-/react-devtools-0.2.2.tgz",
···
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-persist-client": {
+      "version": "5.85.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.85.6.tgz",
+      "integrity": "sha512-zLUfm8JlI6/s0AqvX5l5CcazdHwj5gwcv0mWYOaJJvADyFzl2wwQKqB/H4nYSeygUtrepBgPwVQKNqH9ZwlZpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-persist-client-core": "5.85.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.85.6",
         "react": "^18 || ^19"
       }
     },

package.json

···
   "dependencies": {
     "@atproto/api": "^0.16.6",
     "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/query-sync-storage-persister": "^5.85.6",
     "@tanstack/react-devtools": "^0.2.2",
     "@tanstack/react-query": "^5.85.6",
+    "@tanstack/react-query-persist-client": "^5.85.6",
     "@tanstack/react-router": "^1.130.2",
     "@tanstack/react-router-devtools": "^1.131.5",
     "@tanstack/router-plugin": "^1.121.2",

src/components/InfiniteCustomFeed.tsx

···
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
+    refetch,
+    isRefetching,
   } = useInfiniteQueryFeedSkeleton({
     feedUri: feedUri,
     agent: agent ?? undefined,
···
     pdsUrl: pdsUrl,
     feedServiceDid: feedServiceDid,
   });
+
+  const handleRefresh = () => {
+    refetch();
+  };
 
   //const { ref, inView } = useInView();
 
···
           Load More Posts
         </button>
       )}
-      {!hasNextPage && <div className="p-4 text-center text-gray-500">End of feed.</div>}
+      {!hasNextPage && (
+        <div className="p-4 text-center text-gray-500">End of feed.</div>
+      )}
+      <button
+        onClick={handleRefresh}
+        disabled={isRefetching}
+        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" />}
+      </button>
     </>
   );
-}
+}
+
+const RefreshIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    //width={360}
+    //height={360}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      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/main.tsx

···
 
 import "~/styles/app.css";
 import reportWebVitals from "./reportWebVitals.ts";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, } from "@tanstack/react-query";
+import {
+  persistQueryClient,
+} from "@tanstack/react-query-persist-client";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 
-const queryClient = new QueryClient();
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24 * 24, // 24 days
+    },
+  },
+});
+const localStoragePersister = createSyncStoragePersister({
+  storage: window.localStorage,
+});
+
+persistQueryClient({
+  queryClient,
+  persister: localStoragePersister,
+})
+
 // Create a new router instance
 const router = createRouter({
   routeTree,
···
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     // double queries annoys me
-    <StrictMode>
+    // <StrictMode>
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
       </QueryClientProvider>
-    </StrictMode>
+    // </StrictMode>
   );
 }
 

src/routes/__root.tsx

···
   Outlet,
   Scripts,
   createRootRoute,
+  createRootRouteWithContext,
   useLocation,
   useNavigate,
 } from "@tanstack/react-router";
···
 import { AuthProvider, useAuth } from "~/providers/PassAuthProvider";
 import { PersistentStoreProvider } from "~/providers/PersistentStoreProvider";
 import type AtpAgent from "@atproto/api";
+import type { QueryClient } from "@tanstack/react-query";
 
-export const Route = createRootRoute({
+export const Route = createRootRouteWithContext<{
+  queryClient: QueryClient;
+}>()({
   head: () => ({
     meta: [
       {

src/routes/index.tsx

···
   useQueryPost,
   useQueryFeedSkeleton,
   useQueryPreferences,
-  useQueryArbitrary
+  useQueryArbitrary,
+  constructInfiniteFeedSkeletonQuery,
+  constructArbitraryQuery,
+  constructIdentityQuery,
+  constructPostQuery,
 } from "~/utils/useQuery";
 import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed";
+import { useAtom, useSetAtom } from "jotai";
+import {
+  selectedFeedUriAtom,
+  store,
+  agentAtom,
+  authedAtom,
+  feedScrollPositionsAtom,
+} from "~/utils/atoms";
+import { useEffect, useLayoutEffect } from "react";
 
 export const Route = createFileRoute("/")({
+  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;
+    }
+
+    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 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;
+            console.log("preloading: ", feedviewpost.post);
+            const opts = constructPostQuery(feedviewpost.post);
+            try {
+              await queryClient.ensureQueryData(opts);
+            } catch (e) {
+              console.log(" failed:", e);
+            }
+          })
+        );
+      })
+    );
+  },
   component: Home,
+  pendingComponent: PendingHome,
 });
-
+function PendingHome() {
+  return <div>loading... (prefetching your timeline)</div>;
+}
 function Home() {
   const {
     agent,
···
     loading: loadering,
     authed,
   } = useAuth();
+
+  useEffect(() => {
+    if (agent?.did) {
+      store.set(authedAtom, true);
+    } else {
+      store.set(authedAtom, false);
+    }
+  }, [loginStatus, agent, authed]);
+  useEffect(() => {
+    if (agent) {
+      store.set(agentAtom, agent);
+    } else {
+      store.set(agentAtom, null);
+    }
+  }, [loginStatus, agent, authed]);
+
   //const { get, set } = usePersistentStore();
   // const [feed, setFeed] = React.useState<any[]>([]);
   // const [loading, setLoading] = React.useState(true);
···
   // }, [prefs]);
 
   // const savedFeeds = savedFeedsPref?.items || [];
-    
+
   const identityresultmaybe = useQueryIdentity(agent?.did);
-  const identity = identityresultmaybe?.data
+  const identity = identityresultmaybe?.data;
 
-  const prefsresultmaybe = useQueryPreferences({agent: agent ?? undefined, pdsUrl: identity?.pds});
-  const prefs = prefsresultmaybe?.data
-  
+  const prefsresultmaybe = useQueryPreferences({
+    agent: agent ?? undefined,
+    pdsUrl: identity?.pds,
+  });
+  const prefs = prefsresultmaybe?.data;
+
   const savedFeeds = React.useMemo(() => {
     const savedFeedsPref = prefs?.preferences?.find(
       (p: any) => p?.$type === "app.bsky.actor.defs#savedFeedsPrefV2"
···
     return savedFeedsPref?.items || [];
   }, [prefs]);
 
-
+  const [persistentSelectedFeed, setPersistentSelectedFeed] =
+    useAtom(selectedFeedUriAtom); // React.useState<string | null>(null);
+  const [unauthedSelectedFeed, setUnauthedSelectedFeed] = React.useState(
+    persistentSelectedFeed
+  ); // React.useState<string | null>(null);
+  const selectedFeed = agent?.did
+    ? persistentSelectedFeed
+    : unauthedSelectedFeed;
+  const setSelectedFeed = agent?.did
+    ? setPersistentSelectedFeed
+    : setUnauthedSelectedFeed;
 
-  const [selectedFeed, setSelectedFeed] = React.useState<string | null>(null);
-
+  console.log("my selectedFeed is: ", selectedFeed);
   React.useEffect(() => {
     const fallbackFeed =
       "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot";
     if (authed) {
+      if (selectedFeed) return;
       if (savedFeeds.length > 0) {
         setSelectedFeed((prev) =>
           prev && savedFeeds.some((f: any) => f.value === prev)
             ? prev
-            : savedFeeds[0].value,
+            : savedFeeds[0].value
         );
       } else {
+        if (selectedFeed) return;
         setSelectedFeed(fallbackFeed);
       }
     } else {
+      if (selectedFeed) return;
       setSelectedFeed(fallbackFeed);
     }
-  }, [savedFeeds, authed]);
+  }, [savedFeeds, authed, setSelectedFeed]);
 
   // React.useEffect(() => {
   //   if (loadering || !selectedFeed) return;
···
   //     ignore = true;
   //   };
   // }, [authed, agent, loadering, selectedFeed, get, set]);
-  
+
+  const [scrollPositions, setScrollPositions] = useAtom(
+    feedScrollPositionsAtom
+  );
+
+  const scrollRef = React.useRef<Record<string, number>>({});
+
+  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;
+      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);
+
+  useLayoutEffect(() => {
+    setRestoringScrollPosition(true);
+    const savedPosition = scrollPositions[selectedFeed ?? "null"] ?? 0;
+
+    let 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]);
 
-  const feedGengetrecordquery = useQueryArbitrary(selectedFeed??undefined);
+  const feedGengetrecordquery = useQueryArbitrary(selectedFeed ?? undefined);
   const feedServiceDid = (feedGengetrecordquery?.data?.value as any)?.did;
 
   // const {
···
 
   // const feed = feedData?.feed || [];
 
-  const isReadyForAuthedFeed = authed && agent && identity?.pds && feedServiceDid;
+  const isReadyForAuthedFeed =
+    authed && agent && identity?.pds && feedServiceDid;
   const isReadyForUnauthedFeed = !authed && selectedFeed;
 
   return (
-    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
+    <div className="relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
       <div className="flex items-center gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin">
         {savedFeeds.length > 0 ? (
           savedFeeds.map((item: any, idx: number) => {
···
         />
       ))} */}
 
-      {(authed && (!identity?.pds || !feedServiceDid)) && (
-        <div className="p-4 text-center text-gray-500">Preparing your feed...</div>
+      {authed && (!identity?.pds || !feedServiceDid) && (
+        <div className="p-4 text-center text-gray-500">
+          Preparing your feed...
+        </div>
       )}
 
-      {(isReadyForAuthedFeed || isReadyForUnauthedFeed) ? (
-          <InfiniteCustomFeed 
-            feedUri={selectedFeed!} 
-            pdsUrl={identity?.pds}
-            feedServiceDid={feedServiceDid}
-          />
+      {isReadyForAuthedFeed || isReadyForUnauthedFeed ? (
+        <InfiniteCustomFeed
+          feedUri={selectedFeed!}
+          pdsUrl={identity?.pds}
+          feedServiceDid={feedServiceDid}
+        />
       ) : (
-          <div className="p-4 text-center text-gray-500">Select a feed to get started.</div>
+        <div className="p-4 text-center text-gray-500">
+          Select a feed to get started.
+        </div>
+      )}
+      {false && restoringScrollPosition && (
+        <div className="fixed top-1/2 left-1/2 right-1/2">
+          restoringScrollPosition
+        </div>
       )}
     </div>
   );
···
     } catch {}
   }
   const url = `https://free-fly-24.deno.dev/resolve-did-web?did=${encodeURIComponent(
-    didweb,
+    didweb
   )}`;
   const res = await fetch(url);
   if (!res.ok) throw new Error("Failed to resolve didwebdoc");

src/utils/atoms.ts

···
-import { atom } from "jotai";
+import type AtpAgent from "@atproto/api";
+import { atom, createStore } from "jotai";
+import { atomWithStorage } from 'jotai/utils';
+
+export const store = createStore();
 
-export const selectedFeedUriAtom = atom<string | null>(null);
+export const selectedFeedUriAtom = atomWithStorage<string | null>(
+  'selectedFeedUri',
+  null
+);
 
-export const feedScrollPositionsAtom = atom<Record<string, number>>({});
+//export const feedScrollPositionsAtom = atom<Record<string, number>>({});
+
+export const feedScrollPositionsAtom = atomWithStorage<Record<string, number>>(
+  'feedscrollpositions',
+  {}
+);
+
+export const likedPostsAtom = atomWithStorage<Record<string, boolean>>(
+  'likedPosts',
+  {}
+);
+
+export const agentAtom = atom<AtpAgent|null>(null);
+export const authedAtom = atom<boolean>(false);

src/utils/useQuery.ts

···
         return undefined;
       }
     },
+    // enforce short lifespan
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    gcTime: 5 * 60 * 1000,
   });
 }
 export function useQueryConstellation(query: {
···
 
 export function constructArbitraryQuery(uri?: string) {
   return queryOptions({
-    queryKey: ["post", uri],
+    queryKey: ["arbitrary", uri],
     queryFn: async () => {
       if (!uri) return undefined as undefined
       const res = await fetch(