long delay when selecting tags in UI #382

improved performance by not handling hover in css
also rendering the draggable div only if draggable mode is active

apps/web/components/dashboard/tags/TagPill.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
@@ -22,6 +22,11 @@ export function TagPill({
   count: number;
   isDraggable: boolean;
 }) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseOver = () => setIsHovered(true);
+  const handleMouseOut = () => setIsHovered(false);
+
   const { mutate: mergeTag } = useMergeTag({
     onSuccess: () => {
       toast({
@@ -62,27 +67,25 @@ export function TagPill({
     },
   );
 
-  return (
-    <Draggable
-      key={id}
-      axis="both"
-      onStart={dragAndDropFunction.handleDragStart}
-      onStop={dragAndDropFunction.handleDragEnd}
-      disabled={!isDraggable}
-      defaultClassNameDragging={"position-relative z-10 pointer-events-none"}
-      position={{ x: 0, y: 0 }}
+  const pill = (
+    <div
+      className="group relative flex"
+      onMouseOver={handleMouseOver}
+      onFocus={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onBlur={handleMouseOut}
     >
-      <div className="group relative flex">
-        <Link
-          className={
-            "flex gap-2 rounded-md border border-border bg-background px-2 py-1 text-foreground hover:bg-foreground hover:text-background"
-          }
-          href={`/dashboard/tags/${id}`}
-          data-id={id}
-        >
-          {name} <Separator orientation="vertical" /> {count}
-        </Link>
+      <Link
+        className={
+          "flex gap-2 rounded-md border border-border bg-background px-2 py-1 text-foreground hover:bg-foreground hover:text-background"
+        }
+        href={`/dashboard/tags/${id}`}
+        data-id={id}
+      >
+        {name} <Separator orientation="vertical" /> {count}
+      </Link>
 
+      {isHovered && (
         <DeleteTagConfirmationDialog tag={{ name, id }}>
           <Button
             size="none"
@@ -92,7 +95,23 @@ export function TagPill({
             <X className="size-3" />
           </Button>
         </DeleteTagConfirmationDialog>
-      </div>
+      )}
+    </div>
+  );
+  if (!isDraggable) {
+    return pill;
+  }
+  return (
+    <Draggable
+      key={id}
+      axis="both"
+      onStart={dragAndDropFunction.handleDragStart}
+      onStop={dragAndDropFunction.handleDragEnd}
+      disabled={!isDraggable}
+      defaultClassNameDragging={"position-relative z-10 pointer-events-none"}
+      position={{ x: 0, y: 0 }}
+    >
+      {pill}
     </Draggable>
   );
 }