fix: Show loading indicators in the bookmark preview page

2 files changed, 17 insertions, 32 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
index 76d3f1b8..50f30e47 100644
--- a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
@@ -14,25 +14,11 @@ import BookmarkOptions from "./BookmarkOptions";
 import { api } from "@/lib/trpc";
 import { Maximize2, Star } from "lucide-react";
 import TagList from "./TagList";
-
-function isStillCrawling(bookmark: ZBookmark) {
-  return (
-    bookmark.content.type == "link" &&
-    !bookmark.content.crawledAt &&
-    Date.now().valueOf() - bookmark.createdAt.valueOf() < 30 * 1000
-  );
-}
-
-function isStillTagging(bookmark: ZBookmark) {
-  return (
-    bookmark.taggingStatus == "pending" &&
-    Date.now().valueOf() - bookmark.createdAt.valueOf() < 30 * 1000
-  );
-}
-
-function isStillLoading(bookmark: ZBookmark) {
-  return isStillTagging(bookmark) || isStillCrawling(bookmark);
-}
+import {
+  isBookmarkStillCrawling,
+  isBookmarkStillLoading,
+  isBookmarkStillTagging,
+} from "@/lib/bookmarkUtils";
 
 export default function LinkCard({
   bookmark: initialData,
@@ -53,7 +39,7 @@ export default function LinkCard({
           return false;
         }
         // If the link is not crawled or not tagged
-        if (isStillLoading(data)) {
+        if (isBookmarkStillLoading(data)) {
           return 1000;
         }
         return false;
@@ -76,7 +62,7 @@ export default function LinkCard({
     <ImageCard className={className}>
       <Link href={link.url}>
         <ImageCardBanner
-          src={isStillCrawling(bookmark) ? "/blur.avif" : image}
+          src={isBookmarkStillCrawling(bookmark) ? "/blur.avif" : image}
         />
       </Link>
       <ImageCardContent>
@@ -88,7 +74,10 @@ export default function LinkCard({
         {/* There's a hack here. Every tag has the full hight of the container itself. That why, when we enable flex-wrap,
         the overflowed don't show up. */}
         <ImageCardBody className="flex h-full flex-wrap space-x-1 overflow-hidden">
-          <TagList bookmark={bookmark} loading={isStillTagging(bookmark)} />
+          <TagList
+            bookmark={bookmark}
+            loading={isBookmarkStillTagging(bookmark)}
+          />
         </ImageCardBody>
         <ImageCardFooter>
           <div className="mt-1 flex justify-between text-gray-500">
diff --git a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
index 5e0ba3f9..2565e69d 100644
--- a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
@@ -9,15 +9,8 @@ import TagList from "./TagList";
 import Markdown from "react-markdown";
 import { useState } from "react";
 import { BookmarkedTextViewer } from "./BookmarkedTextViewer";
-import { Button } from "@/components/ui/button";
 import Link from "next/link";
-
-function isStillTagging(bookmark: ZBookmark) {
-  return (
-    bookmark.taggingStatus == "pending" &&
-    Date.now().valueOf() - bookmark.createdAt.valueOf() < 30 * 1000
-  );
-}
+import { isBookmarkStillTagging } from "@/lib/bookmarkUtils";
 
 export default function TextCard({
   bookmark: initialData,
@@ -37,7 +30,7 @@ export default function TextCard({
         if (!data) {
           return false;
         }
-        if (isStillTagging(data)) {
+        if (isBookmarkStillTagging(data)) {
           return 1000;
         }
         return false;
@@ -69,7 +62,10 @@ export default function TextCard({
           {bookmarkedText.text}
         </Markdown>
         <div className="mt-4 flex flex-none flex-wrap gap-1 overflow-hidden">
-          <TagList bookmark={bookmark} loading={isStillTagging(bookmark)} />
+          <TagList
+            bookmark={bookmark}
+            loading={isBookmarkStillTagging(bookmark)}
+          />
         </div>
         <div className="flex w-full justify-between">
           <div />