fix: fix tag flicker caused by tag sorting

4 files changed, 39 insertions, 46 deletions

diff --git a/apps/browser-extension/src/components/TagList.tsx b/apps/browser-extension/src/components/TagList.tsx
index 5635a7c2..77a3ea87 100644
--- a/apps/browser-extension/src/components/TagList.tsx
+++ b/apps/browser-extension/src/components/TagList.tsx
@@ -14,20 +14,16 @@ export default function TagList({ bookmarkId }: { bookmarkId: string }) {
       {bookmark.tags.length === 0 && !isBookmarkStillTagging(bookmark) && (
         <Badge variant="secondary">No tags</Badge>
       )}
-      {[...bookmark.tags]
-        .sort((a, b) =>
-          a.attachedBy === "ai" ? 1 : b.attachedBy === "ai" ? -1 : 0,
-        )
-        .map((tag) => (
-          <Badge
-            key={tag.id}
-            className={
-              tag.attachedBy === "ai" ? "bg-purple-500 text-white" : undefined
-            }
-          >
-            {tag.name}
-          </Badge>
-        ))}
+      {[...bookmark.tags].map((tag) => (
+        <Badge
+          key={tag.id}
+          className={
+            tag.attachedBy === "ai" ? "bg-purple-500 text-white" : undefined
+          }
+        >
+          {tag.name}
+        </Badge>
+      ))}
       {isBookmarkStillTagging(bookmark) && (
         <Badge variant="secondary">AI tags loading...</Badge>
       )}
diff --git a/apps/web/components/dashboard/bookmarks/TagList.tsx b/apps/web/components/dashboard/bookmarks/TagList.tsx
index e8bed9eb..593a269b 100644
--- a/apps/web/components/dashboard/bookmarks/TagList.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagList.tsx
@@ -24,24 +24,20 @@ export default function TagList({
   }
   return (
     <>
-      {bookmark.tags
-        .sort((a, b) =>
-          a.attachedBy === "ai" ? 1 : b.attachedBy === "ai" ? -1 : 0,
-        )
-        .map((t) => (
-          <div key={t.id} className={className}>
-            <Link
-              key={t.id}
-              className={cn(
-                badgeVariants({ variant: "secondary" }),
-                "text-nowrap font-light text-gray-700 hover:bg-foreground hover:text-secondary dark:text-gray-400",
-              )}
-              href={`/dashboard/tags/${t.id}`}
-            >
-              {t.name}
-            </Link>
-          </div>
-        ))}
+      {bookmark.tags.map((t) => (
+        <div key={t.id} className={className}>
+          <Link
+            key={t.id}
+            className={cn(
+              badgeVariants({ variant: "secondary" }),
+              "text-nowrap font-light text-gray-700 hover:bg-foreground hover:text-secondary dark:text-gray-400",
+            )}
+            href={`/dashboard/tags/${t.id}`}
+          >
+            {t.name}
+          </Link>
+        </div>
+      ))}
     </>
   );
 }
diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index 1893c2a6..f80ba963 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -31,9 +31,11 @@ export function TagsEditor({
   const [optimisticTags, setOptimisticTags] = useState<ZBookmarkTags[]>(_tags);
 
   const { data: existingTags, isLoading: isExistingTagsLoading } =
-    api.tags.list.useQuery();
-
-  existingTags?.tags.sort((a, b) => a.name.localeCompare(b.name));
+    api.tags.list.useQuery(undefined, {
+      select: (data) => ({
+        tags: data.tags.sort((a, b) => a.name.localeCompare(b.name)),
+      }),
+    });
 
   const onChange = (
     _option: readonly EditableTag[],
@@ -96,14 +98,11 @@ export function TagsEditor({
           attachedBy: "human" as const,
         })) ?? []
       }
-      value={optimisticTags
-        .slice()
-        .sort((a) => (a.attachedBy === "human" ? -1 : 1))
-        .map((t) => ({
-          label: t.name,
-          value: t.id,
-          attachedBy: t.attachedBy,
-        }))}
+      value={optimisticTags.slice().map((t) => ({
+        label: t.name,
+        value: t.id,
+        attachedBy: t.attachedBy,
+      }))}
       isMulti
       closeMenuOnSelect={false}
       isClearable={false}
diff --git a/apps/web/components/dashboard/tags/TagSelector.tsx b/apps/web/components/dashboard/tags/TagSelector.tsx
index 01690da1..27213b8a 100644
--- a/apps/web/components/dashboard/tags/TagSelector.tsx
+++ b/apps/web/components/dashboard/tags/TagSelector.tsx
@@ -21,14 +21,16 @@ export function TagSelector({
   placeholder?: string;
   className?: string;
 }) {
-  const { data: allTags, isPending } = api.tags.list.useQuery();
+  const { data: allTags, isPending } = api.tags.list.useQuery(undefined, {
+    select: (data) => ({
+      tags: data.tags.sort((a, b) => a.name.localeCompare(b.name)),
+    }),
+  });
 
   if (isPending || !allTags) {
     return <LoadingSpinner />;
   }
 
-  allTags.tags = allTags.tags.sort((a, b) => a.name.localeCompare(b.name));
-
   return (
     <Select onValueChange={onChange} value={value ?? ""}>
       <SelectTrigger className={cn("w-full", className)}>