fix: avoid unnecessary favorites reloads

src/pages/Favorites/index.tsx

@@ -12,6 +12,17 @@ import { useWallet } from "../../wallet/WalletProvider";
 
 const pageSize = 50;
 
+type FavoritePosts = Awaited<ReturnType<typeof listFavorites>>["items"];
+
+type FavoriteListCache = {
+  address: string;
+  lang: Lang;
+  mutationVersion: number;
+  posts: FavoritePosts;
+};
+
+let favoriteListCache: FavoriteListCache | null = null;
+
 function useCategories(lang: Lang): Category[] {
   const [categories, setCategories] = useState<Category[]>(() => {
     const cached = readJSONCache<Category[]>(
@@ -43,11 +54,9 @@ function useCategories(lang: Lang): Category[] {
 export default function Favorites() {
   const { lang, t } = useI18n();
   const wallet = useWallet();
-  const { markFavorite } = useFavorites();
+  const { markFavorite, mutationVersion } = useFavorites();
   const categories = useCategories(lang);
-  const [posts, setPosts] = useState<
-    Awaited<ReturnType<typeof listFavorites>>["items"]
-  >([]);
+  const [posts, setPosts] = useState<FavoritePosts>([]);
   const [loading, setLoading] = useState(false);
   const [loaded, setLoaded] = useState(false);
   const [error, setError] = useState("");
@@ -56,7 +65,7 @@ export default function Favorites() {
   useSetPageTitle(t("favorites"));
 
   useEffect(() => {
-    if (!wallet.token || wallet.status !== "loggedIn") {
+    if (!wallet.token || wallet.status !== "loggedIn" || !wallet.address) {
       setPosts([]);
       setLoading(false);
       setLoaded(false);
@@ -64,18 +73,40 @@ export default function Favorites() {
       return;
     }
 
+    const walletAddress = wallet.address;
+    const walletToken = wallet.token;
+
+    if (
+      reloadKey === 0 &&
+      favoriteListCache?.address === walletAddress &&
+      favoriteListCache.lang === lang &&
+      favoriteListCache.mutationVersion === mutationVersion
+    ) {
+      setPosts(favoriteListCache.posts);
+      setLoading(false);
+      setLoaded(true);
+      setError("");
+      return;
+    }
+
     let cancelled = false;
     setLoading(true);
     setLoaded(false);
     setError("");
 
-    listFavorites(wallet.token, {
+    listFavorites(walletToken, {
       limit: pageSize,
       includeUnavailable: true,
     })
       .then((data) => {
         if (cancelled) return;
         const items = itemsOrEmpty(data.items);
+        favoriteListCache = {
+          address: walletAddress,
+          lang,
+          mutationVersion,
+          posts: items,
+        };
         setPosts(items);
         items.forEach((post) => markFavorite(post.id, true));
         setLoaded(true);
@@ -97,7 +128,7 @@ export default function Favorites() {
     return () => {
       cancelled = true;
     };
-  }, [markFavorite, reloadKey, t, wallet]);
+  }, [lang, markFavorite, mutationVersion, reloadKey, t, wallet]);
 
   if (wallet.status === "loading") {
     return (