background like mutation

src/components/UniversalPostRenderer.tsx

···
   composerAtom,
   constellationURLAtom,
   imgCDNAtom,
-  likedPostsAtom,
 } from "~/utils/atoms";
 import { useHydratedEmbed } from "~/utils/useHydrated";
 import {
···
   feedviewpost?: boolean;
   repostedby?: string;
   style?: React.CSSProperties;
-  ref?: React.Ref<HTMLDivElement>;
+  ref?: React.RefObject<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
   concise?: boolean;
···
   feedviewpost?: boolean;
   repostedby?: string;
   style?: React.CSSProperties;
-  ref?: React.Ref<HTMLDivElement>;
+  ref?: React.RefObject<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
   concise?: boolean;
···
 import { useAuth } from "~/providers/UnifiedAuthProvider";
 import { FeedItemRenderAturiLoader, FollowButton, Mutual } from "~/routes/profile.$did";
 import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i";
+import { useFastLike } from "~/utils/likeMutationQueue";
 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed";
 // import type {
 //   ViewRecord,
···
   depth?: number;
   repostedby?: string;
   style?: React.CSSProperties;
-  ref?: React.Ref<HTMLDivElement>;
+  ref?: React.RefObject<HTMLDivElement>;
   dataIndexPropPass?: number;
   nopics?: boolean;
   concise?: boolean;
···
 }) {
   const parsed = new AtUri(post.uri);
   const navigate = useNavigate();
-  const [likedPosts, setLikedPosts] = useAtom(likedPostsAtom);
   const [hasRetweeted, setHasRetweeted] = useState<boolean>(
     post.viewer?.repost ? true : false
   );
-  const [hasLiked, setHasLiked] = useState<boolean>(
-    post.uri in likedPosts || post.viewer?.like ? true : false
-  );
   const [, setComposerPost] = useAtom(composerAtom);
   const { agent } = useAuth();
-  const [likeUri, setLikeUri] = useState<string | undefined>(post.viewer?.like);
   const [retweetUri, setRetweetUri] = useState<string | undefined>(
     post.viewer?.repost
   );
-
-  const likeOrUnlikePost = async () => {
-    const newLikedPosts = { ...likedPosts };
-    if (!agent) {
-      console.error("Agent is null or undefined");
-      return;
-    }
-    if (hasLiked) {
-      if (post.uri in likedPosts) {
-        const likeUri = likedPosts[post.uri];
-        setLikeUri(likeUri);
-      }
-      if (likeUri) {
-        await agent.deleteLike(likeUri);
-        setHasLiked(false);
-        delete newLikedPosts[post.uri];
-      }
-    } else {
-      const { uri } = await agent.like(post.uri, post.cid);
-      setLikeUri(uri);
-      setHasLiked(true);
-      newLikedPosts[post.uri] = uri;
-    }
-    setLikedPosts(newLikedPosts);
-  };
+  const { liked, toggle, backfill } = useFastLike(post.uri, post.cid);
+  // const bovref = useBackfillOnView(post.uri, post.cid);
+  // React.useLayoutEffect(()=>{
+  //   if (expanded && !isQuote) {
+  //     backfill();
+  //   }
+  // },[backfill, expanded, isQuote])
 
   const repostOrUnrepostPost = async () => {
     if (!agent) {
···
   const isMainItem = false;
   const setMainItem = (any: any) => {};
   // eslint-disable-next-line react-hooks/refs
-  console.log("Received ref in UniversalPostRenderer:", ref);
+  //console.log("Received ref in UniversalPostRenderer:", usedref);
   return (
     <div ref={ref} style={style} data-index={dataIndexPropPass}>
       <div
···
                   </DropdownMenu.Root>
                   <HitSlopButton
                     onClick={() => {
-                      likeOrUnlikePost();
+                      toggle();
                     }}
                     style={{
                       ...btnstyle,
-                      ...(hasLiked ? { color: "#EC4899" } : {}),
+                      ...(liked ? { color: "#EC4899" } : {}),
                     }}
                   >
-                    {hasLiked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />}
-                    {(post.likeCount || 0) + (hasLiked ? 1 : 0)}
+                    {liked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />}
+                    {(post.likeCount || 0) + (liked ? 1 : 0)}
                   </HitSlopButton>
                   <div style={{ display: "flex", gap: 8 }}>
                     <HitSlopButton

src/providers/LikeMutationQueueProvider.tsx

···
+import { AtUri } from "@atproto/api";
+import { TID } from "@atproto/common-web";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import React, { createContext, use, useCallback, useEffect, useRef } from "react";
+
+import { useAuth } from "~/providers/UnifiedAuthProvider";
+import { constellationURLAtom, internalLikedPostsAtom } from "~/utils/atoms";
+import { constructArbitraryQuery, constructConstellationQuery, type linksRecordsResponse } from "~/utils/useQuery";
+
+export type LikeRecord = { uri: string; target: string; cid: string };
+export type LikeMutation = { type: 'like'; target: string; cid: string };
+export type UnlikeMutation = { type: 'unlike'; likeRecordUri: string; target: string, originalRecord: LikeRecord };
+export type Mutation = LikeMutation | UnlikeMutation;
+
+interface LikeMutationQueueContextType {
+  fastState: (target: string) => LikeRecord | null | undefined;
+  fastToggle: (target:string, cid:string) => void;
+  backfillState: (target: string, user: string) => Promise<void>;
+}
+
+const LikeMutationQueueContext = createContext<LikeMutationQueueContextType | undefined>(undefined);
+
+export function LikeMutationQueueProvider({ children }: { children: React.ReactNode }) {
+  const { agent } = useAuth();
+  const queryClient = useQueryClient();
+  const [likedPosts, setLikedPosts] = useAtom(internalLikedPostsAtom);
+  const [constellationurl] = useAtom(constellationURLAtom);
+
+  const likedPostsRef = useRef(likedPosts);
+  useEffect(() => {
+    likedPostsRef.current = likedPosts;
+  }, [likedPosts]);
+
+  const queueRef = useRef<Mutation[]>([]);
+  const runningRef = useRef(false);
+
+  const fastState = (target: string) => likedPosts[target];
+
+  const setFastState = useCallback(
+    (target: string, record: LikeRecord | null) =>
+      setLikedPosts((prev) => ({ ...prev, [target]: record })),
+    [setLikedPosts]
+  );
+  
+  const enqueue = (mutation: Mutation) => queueRef.current.push(mutation);
+
+  const fastToggle = useCallback((target: string, cid: string) => {
+    const likedRecord = likedPostsRef.current[target];
+    
+    if (likedRecord) {
+      setFastState(target, null);
+      if (likedRecord.uri !== 'pending') {
+        enqueue({ type: "unlike", likeRecordUri: likedRecord.uri, target, originalRecord: likedRecord });
+      }
+    } else {
+      setFastState(target, { uri: "pending", target, cid });
+      enqueue({ type: "like", target, cid });
+    }
+  }, [setFastState]);
+
+  /**
+   * 
+   * @deprecated dont use it yet, will cause infinite rerenders
+   */
+  const backfillState = async (target: string, user: string) => {
+      const query = constructConstellationQuery({
+        constellation: constellationurl,
+        method: "/links",
+        target,
+        collection: "app.bsky.feed.like",
+        path: ".subject.uri",
+        dids: [user],
+      });
+      const data = await queryClient.fetchQuery(query);
+      const likes = (data as linksRecordsResponse)?.linking_records?.slice(0, 50) ?? [];
+      const found = likes.find((r) => r.did === user);
+      if (found) {
+        const uri = `at://${found.did}/${found.collection}/${found.rkey}`;
+        const ciddata = await queryClient.fetchQuery(
+          constructArbitraryQuery(uri)
+        );
+        if (ciddata?.cid)
+          setFastState(target, { uri, target, cid: ciddata?.cid });
+      } else {
+        setFastState(target, null);
+      }
+    };
+  
+
+  useEffect(() => {
+    if (!agent?.did) return;
+
+    const processQueue = async () => {
+      if (runningRef.current || queueRef.current.length === 0) return;
+      runningRef.current = true;
+
+      while (queueRef.current.length > 0) {
+        const mutation = queueRef.current.shift()!;
+        try {
+          if (mutation.type === "like") {
+            const newRecord = {
+              repo: agent.did!,
+              collection: "app.bsky.feed.like",
+              rkey: TID.next().toString(),
+              record: {
+                $type: "app.bsky.feed.like",
+                subject: { uri: mutation.target, cid: mutation.cid },
+                createdAt: new Date().toISOString(),
+              },
+            };
+            const response = await agent.com.atproto.repo.createRecord(newRecord);
+            if (!response.success) throw new Error("createRecord failed");
+
+            const uri = `at://${agent.did}/${newRecord.collection}/${newRecord.rkey}`;
+            setFastState(mutation.target, {
+              uri,
+              target: mutation.target,
+              cid: mutation.cid,
+            });
+          } else if (mutation.type === "unlike") {
+            const aturi = new AtUri(mutation.likeRecordUri);
+            await agent.com.atproto.repo.deleteRecord({ repo: agent.did!, collection: aturi.collection, rkey: aturi.rkey });
+            setFastState(mutation.target, null);
+          }
+        } catch (err) {
+          console.error("Like mutation failed, reverting:", err);
+          if (mutation.type === 'like') {
+            setFastState(mutation.target, null);
+          } else if (mutation.type === 'unlike') {
+            setFastState(mutation.target, mutation.originalRecord);
+          }
+        }
+      }
+      runningRef.current = false;
+    };
+
+    const interval = setInterval(processQueue, 1000);
+    return () => clearInterval(interval);
+  }, [agent, setFastState]);
+
+  const value = { fastState, fastToggle, backfillState };
+
+  return (
+    <LikeMutationQueueContext value={value}>
+      {children}
+    </LikeMutationQueueContext>
+  );
+}
+
+export function useLikeMutationQueue() {
+  const context = use(LikeMutationQueueContext);
+  if (context === undefined) {
+    throw new Error('useLikeMutationQueue must be used within a LikeMutationQueueProvider');
+  }
+  return context;
+}

src/routes/__root.tsx

···
 import Login from "~/components/Login";
 import { NotFound } from "~/components/NotFound";
 import { FluentEmojiHighContrastGlowingStar } from "~/components/Star";
+import { LikeMutationQueueProvider } from "~/providers/LikeMutationQueueProvider";
 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider";
 import { composerAtom, hueAtom, useAtomCssVar } from "~/utils/atoms";
 import { seo } from "~/utils/seo";
···
 function RootComponent() {
   return (
     <UnifiedAuthProvider>
-      <RootDocument>
-        <KeepAliveProvider>
-          <KeepAliveOutlet />
-        </KeepAliveProvider>
-      </RootDocument>
+      <LikeMutationQueueProvider>
+        <RootDocument>
+          <KeepAliveProvider>
+            <KeepAliveOutlet />
+          </KeepAliveProvider>
+        </RootDocument>
+      </LikeMutationQueueProvider>
     </UnifiedAuthProvider>
   );
 }

src/routes/profile.$did/index.tsx

···
   useGetFollowState,
   useGetOneToOneState,
 } from "~/utils/followState";
+import { useFastSetLikesFromFeed } from "~/utils/likeMutationQueue";
 import {
   useInfiniteQueryAuthorFeed,
   useQueryArbitrary,
···
   }
 
   const { data: likes } = useQueryConstellation(
-  // @ts-expect-error overloads sucks
+    // @ts-expect-error overloads sucks
     !listmode
       ? {
           target: feed.uri,
···
       className={`px-4 py-4 ${!disableBottomBorder && "border-b"} flex flex-col gap-1`}
       to="/profile/$did/feed/$rkey"
       params={{ did: aturi.host, rkey: aturi.rkey }}
-      onClick={(e)=>{e.stopPropagation();}}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
     >
       <div className="flex flex-row gap-3">
         <div className="min-w-10 min-h-10">
···
   const resolvedDid = did.startsWith("did:") ? did : identity?.did;
 
   const {
-    data: repostsData,
+    data: likesData,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
···
     "app.bsky.feed.like"
   );
 
-  const reposts = React.useMemo(
-    () => repostsData?.pages.flatMap((page) => page.records) ?? [],
-    [repostsData]
+  const likes = React.useMemo(
+    () => likesData?.pages.flatMap((page) => page.records) ?? [],
+    [likesData]
   );
 
+  const { setFastState } = useFastSetLikesFromFeed();
+  const seededRef = React.useRef(new Set<string>());
+
+  useEffect(() => {
+    for (const like of likes) {
+      if (!seededRef.current.has(like.uri)) {
+        seededRef.current.add(like.uri);
+        const record = like.value as unknown as ATPAPI.AppBskyFeedLike.Record;
+        setFastState(record.subject.uri, {
+          target: record.subject.uri,
+          uri: like.uri,
+          cid: like.cid,
+        });
+      }
+    }
+  }, [likes, setFastState]);
+
   return (
     <>
       <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4">
         Likes
       </div>
       <div>
-        {reposts.map((repost) => {
+        {likes.map((like) => {
           if (
-            !repost ||
-            !repost?.value ||
-            !repost?.value?.subject ||
+            !like ||
+            !like?.value ||
+            !like?.value?.subject ||
             // @ts-expect-error blehhhhh
-            !repost?.value?.subject?.uri
+            !like?.value?.subject?.uri
           )
             return;
-          const repostRecord =
-            repost.value as unknown as ATPAPI.AppBskyFeedLike.Record;
+          const likeRecord =
+            like.value as unknown as ATPAPI.AppBskyFeedLike.Record;
           return (
             <UniversalPostRendererATURILoader
-              key={repostRecord.subject.uri}
-              atUri={repostRecord.subject.uri}
+              key={likeRecord.subject.uri}
+              atUri={likeRecord.subject.uri}
               feedviewpost={true}
             />
           );
···
       </div>
 
       {/* Loading and "Load More" states */}
-      {arePostsLoading && reposts.length === 0 && (
-        <div className="p-4 text-center text-gray-500">Loading posts...</div>
+      {arePostsLoading && likes.length === 0 && (
+        <div className="p-4 text-center text-gray-500">Loading likes...</div>
       )}
       {isFetchingNextPage && (
         <div className="p-4 text-center text-gray-500">Loading more...</div>
···
           onClick={() => fetchNextPage()}
           className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold"
         >
-          Load More Posts
+          Load More Likes
         </button>
       )}
-      {reposts.length === 0 && !arePostsLoading && (
-        <div className="p-4 text-center text-gray-500">No posts found.</div>
+      {likes.length === 0 && !arePostsLoading && (
+        <div className="p-4 text-center text-gray-500">No likes found.</div>
       )}
     </>
   );

src/utils/atoms.ts

···
   {}
 );
 
+export type LikeRecord = {
+  uri: string; // at://did/collection/rkey
+  target: string;
+  cid: string;
+};
+
+export const internalLikedPostsAtom = atomWithStorage<Record<string, LikeRecord | null>>(
+  "internal-liked-posts",
+  {}
+);
+
 export const defaultconstellationURL = "constellation.microcosm.blue";
 export const constellationURLAtom = atomWithStorage<string>(
   "constellationURL",

src/utils/likeMutationQueue.ts

···
+import { useAtom } from "jotai";
+import { useCallback } from "react";
+
+import { type LikeRecord,useLikeMutationQueue as useLikeMutationQueueFromProvider } from "~/providers/LikeMutationQueueProvider";
+import { useAuth } from "~/providers/UnifiedAuthProvider";
+
+import { internalLikedPostsAtom } from "./atoms";
+
+export function useFastLike(target: string, cid: string) {
+  const { agent } = useAuth();
+  const { fastState, fastToggle, backfillState } = useLikeMutationQueueFromProvider();
+
+  const liked = fastState(target);
+  const toggle = () => fastToggle(target, cid);
+  /**
+   * 
+   * @deprecated dont use it yet, will cause infinite rerenders
+   */
+  const backfill = () => agent?.did && backfillState(target, agent.did);
+
+  return { liked, toggle, backfill };
+}
+
+export function useFastSetLikesFromFeed() {
+  const [_, setLikedPosts] = useAtom(internalLikedPostsAtom);
+
+  const setFastState = useCallback(
+    (target: string, record: LikeRecord | null) =>
+      setLikedPosts((prev) => ({ ...prev, [target]: record })),
+    [setLikedPosts]
+  );
+
+  return { setFastState };
+}