optimizations

resources/js/components/social/FollowButton.jsx

@@ -17,6 +17,7 @@ export default function FollowButton({
   const [count, setCount] = useState(Number(initialCount || 0))
   const [loading, setLoading] = useState(false)
   const [confirmOpen, setConfirmOpen] = useState(false)
+  const [hovered, setHovered] = useState(false)
 
   const csrfToken = typeof document !== 'undefined'
     ? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
@@ -65,6 +66,8 @@ export default function FollowButton({
       <button
         type="button"
         onClick={onToggle}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
         disabled={loading || !username}
         aria-label={following ? 'Unfollow creator' : 'Follow creator'}
         className={[
@@ -74,8 +77,8 @@ export default function FollowButton({
           className,
         ].join(' ')}
       >
-        <i className={`fa-solid fa-fw ${loading ? 'fa-circle-notch fa-spin' : following ? 'fa-user-check' : 'fa-user-plus'}`} />
-        <span>{following ? 'Following' : 'Follow'}</span>
+        <i className={`fa-solid fa-fw ${loading ? 'fa-circle-notch fa-spin' : following ? (hovered ? 'fa-user-minus' : 'fa-user-check') : 'fa-user-plus'}`} />
+        <span>{following ? (hovered ? 'Unfollow' : 'Following') : 'Follow'}</span>
         {showCount ? <span className="text-xs opacity-70">{count.toLocaleString()}</span> : null}
       </button>
 
@@ -94,4 +97,4 @@ export default function FollowButton({
       />
     </>
   )
-}
+}