fix: fix tag flicker caused by tag sorting

3 files changed, 29 insertions, 32 deletions

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)}>