feature: Show a loading indicator when tags are still being fetched

4 files changed, 37 insertions, 8 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
index bff0644b..6d8e0bdc 100644
--- a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
@@ -23,6 +23,17 @@ function isStillCrawling(bookmark: ZBookmark) {
   );
 }
 
+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);
+}
+
 export default function LinkCard({
   bookmark: initialData,
   className,
@@ -41,8 +52,8 @@ export default function LinkCard({
         if (!data) {
           return false;
         }
-        // If the link is not crawled and
-        if (isStillCrawling(data)) {
+        // If the link is not crawled or not tagged
+        if (isStillLoading(data)) {
           return 1000;
         }
         return false;
@@ -53,7 +64,6 @@ export default function LinkCard({
   if (link.type != "link") {
     throw new Error("Unexpected bookmark type");
   }
-  const isCrawling = isStillCrawling(bookmark);
   const parsedUrl = new URL(link.url);
 
   // A dummy white pixel for when there's no image.
@@ -65,7 +75,9 @@ export default function LinkCard({
   return (
     <ImageCard className={className}>
       <Link href={link.url}>
-        <ImageCardBanner src={isCrawling ? "/blur.avif" : image} />
+        <ImageCardBanner
+          src={isStillCrawling(bookmark) ? "/blur.avif" : image}
+        />
       </Link>
       <ImageCardContent>
         <ImageCardTitle>
@@ -76,7 +88,7 @@ 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={isCrawling} />
+          <TagList bookmark={bookmark} loading={isStillTagging(bookmark)} />
         </ImageCardBody>
         <ImageCardFooter>
           <div className="flex justify-between text-gray-500">
diff --git a/packages/web/app/dashboard/bookmarks/components/TagList.tsx b/packages/web/app/dashboard/bookmarks/components/TagList.tsx
index 60cbf04f..82d9f376 100644
--- a/packages/web/app/dashboard/bookmarks/components/TagList.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/TagList.tsx
@@ -13,8 +13,7 @@ export default function TagList({
 }) {
   if (loading) {
     return (
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-full" />
+      <div className="flex w-full flex-col justify-end space-y-2 p-2">
         <Skeleton className="h-4 w-full" />
         <Skeleton className="h-4 w-full" />
       </div>
diff --git a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
index 5d571356..8170a304 100644
--- a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
@@ -11,6 +11,13 @@ import { useState } from "react";
 import { BookmarkedTextViewer } from "./BookmarkedTextViewer";
 import { Button } from "@/components/ui/button";
 
+function isStillTagging(bookmark: ZBookmark) {
+  return (
+    bookmark.taggingStatus == "pending" &&
+    Date.now().valueOf() - bookmark.createdAt.valueOf() < 30 * 1000
+  );
+}
+
 export default function TextCard({
   bookmark: initialData,
   className,
@@ -24,6 +31,16 @@ export default function TextCard({
     },
     {
       initialData,
+      refetchInterval: (query) => {
+        const data = query.state.data;
+        if (!data) {
+          return false;
+        }
+        if (isStillTagging(data)) {
+          return 1000;
+        }
+        return false;
+      },
     },
   );
   const [previewModalOpen, setPreviewModalOpen] = useState(false);
@@ -51,7 +68,7 @@ export default function TextCard({
           {bookmarkedText.text}
         </Markdown>
         <div className="mt-4 flex flex-none flex-wrap gap-1 overflow-hidden">
-          <TagList bookmark={bookmark} />
+          <TagList bookmark={bookmark} loading={isStillTagging(bookmark)} />
         </div>
         <div className="flex w-full justify-between">
           <div />
diff --git a/packages/web/lib/types/api/bookmarks.ts b/packages/web/lib/types/api/bookmarks.ts
index 9b0ae371..4fb7ed6f 100644
--- a/packages/web/lib/types/api/bookmarks.ts
+++ b/packages/web/lib/types/api/bookmarks.ts
@@ -29,6 +29,7 @@ export const zBareBookmarkSchema = z.object({
   createdAt: z.date(),
   archived: z.boolean(),
   favourited: z.boolean(),
+  taggingStatus: z.enum(["success", "failure", "pending"]).nullable(),
 });
 
 export const zBookmarkSchema = zBareBookmarkSchema.merge(