fix: Dont download html content by default in the bookmark grid. Fixes #1198

4 files changed, 36 insertions, 19 deletions

diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
index af2e4990..9f7a900e 100644
--- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
+++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
@@ -13,7 +13,7 @@ export default async function Bookmarks({
   showDivider,
   showEditorCard = false,
 }: {
-  query: Omit<ZGetBookmarksRequest, "sortOrder">; // Sort order is handled by the store
+  query: Omit<ZGetBookmarksRequest, "sortOrder" | "includeContent">; // Sort order is handled by the store
   header?: React.ReactNode;
   showDivider?: boolean;
   showEditorCard?: boolean;
@@ -23,7 +23,9 @@ export default async function Bookmarks({
     redirect("/");
   }
 
-  const bookmarks = await api.bookmarks.getBookmarks(query);
+  const bookmarks = await api.bookmarks.getBookmarks({
+    ...query,
+  });
 
   return (
     <div className="flex flex-col gap-3">
diff --git a/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
index 03ea9708..da65b9d9 100644
--- a/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
@@ -18,14 +18,14 @@ export default function UpdatableBookmarksGrid({
   bookmarks: initialBookmarks,
   showEditorCard = false,
 }: {
-  query: Omit<ZGetBookmarksRequest, "sortOrder">; // Sort order is handled by the store
+  query: Omit<ZGetBookmarksRequest, "sortOrder" | "includeContent">; // Sort order is handled by the store
   bookmarks: ZGetBookmarksResponse;
   showEditorCard?: boolean;
   itemsPerPage?: number;
 }) {
   const sortOrder = useSortOrderStore((state) => state.sortOrder);
 
-  const finalQuery = { ...query, sortOrder };
+  const finalQuery = { ...query, sortOrder, includeContent: false };
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
     api.bookmarks.getBookmarks.useInfiniteQuery(
diff --git a/apps/web/components/dashboard/bookmarks/action-buttons/ArchiveBookmarkButton.tsx b/apps/web/components/dashboard/bookmarks/action-buttons/ArchiveBookmarkButton.tsx
index 3b8da82f..d45cfc82 100644
--- a/apps/web/components/dashboard/bookmarks/action-buttons/ArchiveBookmarkButton.tsx
+++ b/apps/web/components/dashboard/bookmarks/action-buttons/ArchiveBookmarkButton.tsx
@@ -15,7 +15,14 @@ const ArchiveBookmarkButton = React.forwardRef<
   HTMLButtonElement,
   ArchiveBookmarkButtonProps
 >(({ bookmarkId, onDone, ...props }, ref) => {
-  const { data } = api.bookmarks.getBookmark.useQuery({ bookmarkId });
+  const { data } = api.bookmarks.getBookmark.useQuery(
+    { bookmarkId },
+    {
+      select: (data) => ({
+        archived: data.archived,
+      }),
+    },
+  );
 
   const { mutate: updateBookmark, isPending: isArchivingBookmark } =
     useUpdateBookmark({
diff --git a/apps/web/components/dashboard/preview/LinkContentSection.tsx b/apps/web/components/dashboard/preview/LinkContentSection.tsx
index f37f110e..dd419fcd 100644
--- a/apps/web/components/dashboard/preview/LinkContentSection.tsx
+++ b/apps/web/components/dashboard/preview/LinkContentSection.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Image from "next/image";
 import BookmarkHTMLHighlighter from "@/components/dashboard/preview/BookmarkHtmlHighlighter";
+import { FullPageSpinner } from "@/components/ui/full-page-spinner";
 import {
   Select,
   SelectContent,
@@ -52,16 +53,23 @@ function ScreenshotSection({ link }: { link: ZBookmarkedLink }) {
   );
 }
 
-function CachedContentSection({
-  bookmarkId,
-  link,
-}: {
-  bookmarkId: string;
-  link: ZBookmarkedLink;
-}) {
-  const { data } = api.highlights.getForBookmark.useQuery({
+function CachedContentSection({ bookmarkId }: { bookmarkId: string }) {
+  const { data: highlights } = api.highlights.getForBookmark.useQuery({
     bookmarkId,
   });
+  const { data: cachedContent, isPending: isCachedContentLoading } =
+    api.bookmarks.getBookmark.useQuery(
+      {
+        bookmarkId,
+        includeContent: true,
+      },
+      {
+        select: (data) =>
+          data.content.type == BookmarkTypes.LINK
+            ? data.content.htmlContent
+            : null,
+      },
+    );
 
   const { mutate: createHighlight } = useCreateHighlight({
     onSuccess: () => {
@@ -106,16 +114,18 @@ function CachedContentSection({
   });
 
   let content;
-  if (!link.htmlContent) {
+  if (isCachedContentLoading) {
+    content = <FullPageSpinner />;
+  } else if (!cachedContent) {
     content = (
       <div className="text-destructive">Failed to fetch link content ...</div>
     );
   } else {
     content = (
       <BookmarkHTMLHighlighter
-        htmlContent={link.htmlContent || ""}
+        htmlContent={cachedContent || ""}
         className="prose mx-auto dark:prose-invert"
-        highlights={data?.highlights ?? []}
+        highlights={highlights?.highlights ?? []}
         onDeleteHighlight={(h) =>
           deleteHighlight({
             highlightId: h.id,
@@ -171,9 +181,7 @@ export default function LinkContentSection({
 
   let content;
   if (section === "cached") {
-    content = (
-      <CachedContentSection bookmarkId={bookmark.id} link={bookmark.content} />
-    );
+    content = <CachedContentSection bookmarkId={bookmark.id} />;
   } else if (section === "archive") {
     content = <FullPageArchiveSection link={bookmark.content} />;
   } else if (section === "video") {