optimize & preload curate

Author: rpavlini

apps/extension/src/Curate/Curate.tsx

@@ -33,17 +33,18 @@ import {
 } from "@phosphor-icons/react";
 import { ClockIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { AnimatePresence, motion } from "framer-motion";
-import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
 import { AnimatedNumberBadge } from "../components/AnimatedNumberBadge";
 import { SavedTab } from "../models";
-import { bookmarkStoreActions, useBookmarkStore } from "../store/bookmarkStore";
+import { bookmarkStoreActions } from "../store/bookmarkStore";
 import {
   curateStoreActions,
   InclusionReason,
   InclusionResult,
   useCurateStore,
+  useCurateTabsById,
 } from "../store/curateStore";
 import { pluralize } from "../util";
 import { getUtcISO } from "../util/date";
@@ -54,6 +55,7 @@ import CurateSummary from "./CurateSummary";
 import Ruler from "./Ruler";
 import SwipeableCard, { Direction, SwipeableRef } from "./SwipeableCard";
 import TagList from "./TagList";
+import { useIsMounted } from "usehooks-ts";
 
 interface Props {
   children?: ReactNode;
@@ -131,20 +133,13 @@ export function CurateTrigger({ children }: { children: ReactNode }) {
 export default function Curate({ children, maxCards = 5, curateQueueItems }: Props) {
   const open = useCurateStore((s) => s.open);
   const settings = useCurateStore((s) => s.settings);
-  const tabs = useBookmarkStore((s) => s.tabs);
 
   const { initialized, total, visibleQueue: queue, allQueue, kept, deleted, left, dequeue, unshift } = useCurateQueue(
     maxCards,
     curateQueueItems,
   );
 
-  const curateTabsById = useMemo(() => {
-    const curateTabIds = new Set(curateQueueItems.map((result) => result.tabId));
-
-    return Object.fromEntries(
-      tabs.filter((tab) => curateTabIds.has(tab.id)).map((tab) => [tab.id, tab]),
-    );
-  }, [tabs, curateQueueItems]);
+  const curateTabsById = useCurateTabsById(curateQueueItems);
 
   const swipeableRef = useRef<SwipeableRef | null>(null);
 
@@ -306,6 +301,7 @@ export default function Curate({ children, maxCards = 5, curateQueueItems }: Pro
                       constrained
                       className={cn(
                         "focus-ring absolute rounded-2xl perspective-dramatic transform-3d",
+                        { 'will-change-auto': i < 3 }
                       )}
                       style={{
                         zIndex: remap(i, 0, maxCards, maxCards, 0),

apps/extension/src/NavMenu.tsx

@@ -19,15 +19,30 @@ import { BroomIcon } from "@phosphor-icons/react";
 
 import { NumberNotificationBadge } from "./components/NumberNotificationBadge";
 import { Curate, CurateTrigger } from "./Curate";
-import { useCurateQueue, useCurateStore } from "./store/curateStore";
+import { useCurateQueue, useCurateStore, useCurateTabsById } from "./store/curateStore";
 import { settingStoreActions, useSettingStore } from "./store/settingStore";
+import { usePreloadTabInfo } from "./TabInfo/queries";
 
 export default function NavMenu() {
   const queue = useCurateQueue();
   const open = useCurateStore((s) => s.open);
   const settingsOpen = useSettingStore((s) => s.open);
   const showCurateCount = queue.length > 10;
 
+  const curateTabsById = useCurateTabsById(queue);
+  const preloadTabInfo = usePreloadTabInfo();
+
+  const handlePreloadCurate = () => {
+    const firstQueueItem = queue[0];
+    if (!firstQueueItem) return;
+
+    const tab = curateTabsById[firstQueueItem.tabId];
+    if (tab) {
+      preloadTabInfo({ tabId: tab.id, url: tab.url });
+    }
+  };
+
+
   return (
     <div className="flex gap-2">
       <Curate key={String(open)} curateQueueItems={queue}>
@@ -38,6 +53,8 @@ export default function NavMenu() {
           className="pointer-events-none">
           <CurateTrigger>
             <ButtonWithTooltip
+              onMouseOver={handlePreloadCurate}
+              onFocus={handlePreloadCurate}
               tooltipText="Curate"
               variant="outline"
               size="icon"

apps/extension/src/TabInfo/queries.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 
 import type { TabMetadata } from "./models";
 import { getTabInfoService } from "./TabInfoService";
@@ -9,18 +9,33 @@ interface UseTabInfoQueryOptions {
   enabled?: boolean;
 }
 
+async function fetchTabInfo({ tabId, url }: { tabId?: string; url: string }) {
+  const service = getTabInfoService();
+  const response = await service.fetchMetadata({ tabId, url });
+
+  if (!response.success) {
+    throw new Error(response.error || "Failed to fetch metadata");
+  }
+
+  return response.metadata || null;
+}
+
+export function usePreloadTabInfo() {
+  const queryClient = useQueryClient();
+
+  return ({ tabId, url }: { tabId?: string; url: string }) => {
+    queryClient.prefetchQuery({
+      queryKey: ["tab-info", url],
+      queryFn: () => fetchTabInfo({ tabId, url }),
+    });
+  };
+}
+
 export function useTabInfoQuery({ tabId, url, enabled = true }: UseTabInfoQueryOptions) {
   return useQuery<TabMetadata | null, Error>({
     queryKey: ["tab-info", url],
     queryFn: async () => {
-      const service = getTabInfoService();
-      const response = await service.fetchMetadata({ tabId, url });
-
-      if (!response.success) {
-        throw new Error(response.error || "Failed to fetch metadata");
-      }
-
-      return response.metadata || null;
+      return fetchTabInfo({ tabId, url });
     },
     enabled: enabled && Boolean(url),
     staleTime: 1000 * 60 * 60,

apps/extension/src/store/curateStore.ts

@@ -1,6 +1,7 @@
 import { toast } from "@echotab/ui/Toast";
 import { differenceInDays, differenceInMonths, differenceInWeeks } from "date-fns";
 import dayjs from "dayjs";
+import { memoize } from "proxy-memoize";
 import { useMemo } from "react";
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
@@ -9,7 +10,7 @@ import { getUtcISO } from "../util/date";
 import { createLogger } from "../util/Logger";
 import { useBookmarkStore } from "./bookmarkStore";
 import { StoragePersistence } from "./persistence";
-import { Tag } from "./schema";
+import { SavedTab, Tag } from "./schema";
 import { unassignedTag, useTagsById } from "./tagStore";
 
 const logger = createLogger("CurateStore");
@@ -217,6 +218,28 @@ export const useCurateQueue = ({ manualIds = [] }: { manualIds?: string[] } = {}
   return queue;
 };
 
+const selectCurateTabsById = memoize(
+  (state: { tabs: SavedTab[]; curateTabIds: Set<string> }): Record<string, SavedTab> => {
+    const { tabs, curateTabIds } = state;
+    const result: Record<string, SavedTab> = {};
+    for (const tab of tabs) {
+      if (curateTabIds.has(tab.id)) {
+        result[tab.id] = tab;
+      }
+    }
+    return result;
+  },
+);
+
+export const useCurateTabsById = (curateQueueItems: InclusionResult[]) => {
+  const tabs = useBookmarkStore((s) => s.tabs);
+  const curateTabIds = useMemo(
+    () => new Set(curateQueueItems.map((result) => result.tabId)),
+    [curateQueueItems],
+  );
+  return selectCurateTabsById({ tabs, curateTabIds });
+};
+
 export const initStore = async () => {
   const stored = await persistence.load();
   if (stored) {