From 413dde659fdcff5c08feb8a7a9a4b9b15a829f3b Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Fri, 10 Apr 2026 12:02:31 +0200
Subject: [PATCH] Cancel loading logic if hide button clicked or profile opened
 in new tab; add `onPointerDown` prop to `HideProfileButton`.

---
 web/components/profile-grid.tsx                | 15 ++++++++++++++-
 web/components/widgets/hide-profile-button.tsx |  3 +++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/components/profile-grid.tsx b/web/components/profile-grid.tsx
index c1af0764..b0152c16 100644
--- a/web/components/profile-grid.tsx
+++ b/web/components/profile-grid.tsx
@@ -166,6 +166,7 @@ function ProfilePreview(props: {
   const [showRing, setShowRing] = useState(false)
   const ringTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const pointerStartRef = useRef<{x: number; y: number} | null>(null)
+  const hideButtonClickedRef = useRef(false)
 
   const {theme} = useTheme()
   const isDarkTheme = isDark(theme)
@@ -178,8 +179,17 @@ function ProfilePreview(props: {
     if (pointerStartRef.current) {
       const dx = Math.abs(e.clientX - pointerStartRef.current.x)
       const dy = Math.abs(e.clientY - pointerStartRef.current.y)
+
+      // Check if opening in new tab
+      const isNewTab = e.button === 1 || e.ctrlKey || e.metaKey || e.shiftKey
+
+      // Reset hide button click flag after checking
+      const wasHideButtonClicked = hideButtonClickedRef.current
+      hideButtonClickedRef.current = false
+
       // If moved more than 10px, treat as drag/scroll - cancel loading
-      if (dx > 10 || dy > 10) {
+      // Also cancel if clicking hide button or opening in new tab
+      if (dx > 10 || dy > 10 || wasHideButtonClicked || isNewTab) {
         setIsLoading(false)
         setShowRing(false)
         if (ringTimeoutRef.current) {
@@ -329,6 +339,9 @@ function ProfilePreview(props: {
                 className="ml-2"
                 stopPropagation
                 eyeOff
+                onPointerDown={() => {
+                  hideButtonClickedRef.current = true
+                }}
               />
             )}
           </Row>
diff --git a/web/components/widgets/hide-profile-button.tsx b/web/components/widgets/hide-profile-button.tsx
index 71a305f4..8c590e38 100644
--- a/web/components/widgets/hide-profile-button.tsx
+++ b/web/components/widgets/hide-profile-button.tsx
@@ -15,6 +15,7 @@ export type HideProfileButtonProps = {
   ariaLabel?: string
   stopPropagation?: boolean
   eyeOff?: boolean
+  onPointerDown?: () => void
 }
 
 export function HideProfileButton(props: HideProfileButtonProps) {
@@ -27,6 +28,7 @@ export function HideProfileButton(props: HideProfileButtonProps) {
     ariaLabel,
     stopPropagation,
     eyeOff,
+    onPointerDown,
   } = props
 
   const t = useT()
@@ -80,6 +82,7 @@ export function HideProfileButton(props: HideProfileButtonProps) {
         )}
         disabled={submitting}
         onClick={onClick}
+        onPointerDown={onPointerDown}
         aria-label={
           ariaLabel ??
           (hidden