From 36dc1c752556b8413dfb4d8fae6f930888489224 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Sun, 18 Dec 2022 16:43:18 -0600
Subject: [PATCH] Reduce confusing visual feedback while scrolling

---
 src/view/com/notifications/FeedItem.tsx     |  5 +++--
 src/view/com/post-thread/PostRepostedBy.tsx |  3 ++-
 src/view/com/post-thread/PostThreadItem.tsx |  2 +-
 src/view/com/post-thread/PostVotedBy.tsx    |  3 ++-
 src/view/com/post/Post.tsx                  |  6 +++++-
 src/view/com/posts/FeedItem.tsx             |  2 +-
 src/view/com/profile/ProfileCard.tsx        |  6 +++++-
 src/view/com/profile/ProfileFollowers.tsx   |  3 ++-
 src/view/com/profile/ProfileFollows.tsx     |  3 ++-
 src/view/com/util/Link.tsx                  | 20 ++++++++++++++++++--
 src/view/com/util/PostEmbeds.tsx            |  2 +-
 src/view/screens/Settings.tsx               |  5 ++++-
 12 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 70c4f52163..e504ff39bd 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -50,7 +50,7 @@ export const FeedItem = observer(function FeedItem({
 
   if (item.isReply || item.isMention) {
     return (
-      <Link href={itemHref} title={itemTitle}>
+      <Link href={itemHref} title={itemTitle} noFeedback>
         <Post
           uri={item.uri}
           initView={item.additionalPost}
@@ -121,7 +121,8 @@ export const FeedItem = observer(function FeedItem({
     <Link
       style={[styles.outer, item.isRead ? undefined : styles.outerUnread]}
       href={itemHref}
-      title={itemTitle}>
+      title={itemTitle}
+      noFeedback>
       <View style={styles.layout}>
         <View style={styles.layoutIcon}>
           {icon === 'UpIconSolid' ? (
diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx
index 1f238f5b39..a58644cb73 100644
--- a/src/view/com/post-thread/PostRepostedBy.tsx
+++ b/src/view/com/post-thread/PostRepostedBy.tsx
@@ -86,7 +86,8 @@ const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
     <Link
       style={styles.outer}
       href={`/profile/${item.handle}`}
-      title={item.handle}>
+      title={item.handle}
+      noFeedback>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <UserAvatar
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index ae13e07656..1a0c744d68 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -226,7 +226,7 @@ export const PostThreadItem = observer(function PostThreadItem({
     )
   } else {
     return (
-      <Link style={styles.outer} href={itemHref} title={itemTitle}>
+      <Link style={styles.outer} href={itemHref} title={itemTitle} noFeedback>
         {!item.replyingTo && item.record.reply && (
           <View style={styles.parentReplyLine} />
         )}
diff --git a/src/view/com/post-thread/PostVotedBy.tsx b/src/view/com/post-thread/PostVotedBy.tsx
index 7b798482a0..5857f3792e 100644
--- a/src/view/com/post-thread/PostVotedBy.tsx
+++ b/src/view/com/post-thread/PostVotedBy.tsx
@@ -86,7 +86,8 @@ const LikedByItem = ({item}: {item: VotesViewItemModel}) => {
     <Link
       style={styles.outer}
       href={`/profile/${item.actor.handle}`}
-      title={item.actor.handle}>
+      title={item.actor.handle}
+      noFeedback>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <UserAvatar
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 6faae3dddd..4d756758b2 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -133,7 +133,11 @@ export const Post = observer(function Post({
   }
 
   return (
-    <Link style={[styles.outer, style]} href={itemHref} title={itemTitle}>
+    <Link
+      style={[styles.outer, style]}
+      href={itemHref}
+      title={itemTitle}
+      noFeedback>
       {showReplyLine && <View style={styles.replyLine} />}
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 984fde2893..74edad3652 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -109,7 +109,7 @@ export const FeedItem = observer(function FeedItem({
           style={{marginTop: 2}}
         />
       ) : undefined}
-      <Link style={outerStyles} href={itemHref} title={itemTitle}>
+      <Link style={outerStyles} href={itemHref} title={itemTitle} noFeedback>
         {isChild && <View style={styles.topReplyLine} />}
         {item._isThreadParent && (
           <View
diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx
index 22b8bbdeaa..241c8f10a4 100644
--- a/src/view/com/profile/ProfileCard.tsx
+++ b/src/view/com/profile/ProfileCard.tsx
@@ -20,7 +20,11 @@ export function ProfileCard({
   onPressButton?: () => void
 }) {
   return (
-    <Link style={styles.outer} href={`/profile/${handle}`} title={handle}>
+    <Link
+      style={styles.outer}
+      href={`/profile/${handle}`}
+      title={handle}
+      noFeedback>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <UserAvatar
diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx
index 6801ba161a..09162614e2 100644
--- a/src/view/com/profile/ProfileFollowers.tsx
+++ b/src/view/com/profile/ProfileFollowers.tsx
@@ -84,7 +84,8 @@ const User = ({item}: {item: FollowerItem}) => {
     <Link
       style={styles.outer}
       href={`/profile/${item.handle}`}
-      title={item.handle}>
+      title={item.handle}
+      noFeedback>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <UserAvatar
diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx
index a705cf467e..2652c9acb8 100644
--- a/src/view/com/profile/ProfileFollows.tsx
+++ b/src/view/com/profile/ProfileFollows.tsx
@@ -84,7 +84,8 @@ const User = ({item}: {item: FollowItem}) => {
     <Link
       style={styles.outer}
       href={`/profile/${item.handle}`}
-      title={item.handle}>
+      title={item.handle}
+      noFeedback>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <UserAvatar
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
index 70ba0df7af..2210469d54 100644
--- a/src/view/com/util/Link.tsx
+++ b/src/view/com/util/Link.tsx
@@ -4,8 +4,10 @@ import {
   Linking,
   StyleProp,
   Text,
+  TouchableWithoutFeedback,
   TouchableOpacity,
   TextStyle,
+  View,
   ViewStyle,
 } from 'react-native'
 import {useStores, RootStoreModel} from '../../../state'
@@ -16,11 +18,13 @@ export const Link = observer(function Link({
   href,
   title,
   children,
+  noFeedback,
 }: {
   style?: StyleProp<ViewStyle>
   href: string
   title?: string
   children?: React.ReactNode
+  noFeedback?: boolean
 }) {
   const store = useStores()
   const onPress = () => {
@@ -29,12 +33,24 @@ export const Link = observer(function Link({
   const onLongPress = () => {
     handleLink(store, href, true)
   }
+  if (noFeedback) {
+    return (
+      <TouchableWithoutFeedback
+        onPress={onPress}
+        onLongPress={onLongPress}
+        delayPressIn={50}>
+        <View style={style}>
+          {children ? children : <Text>{title || 'link'}</Text>}
+        </View>
+      </TouchableWithoutFeedback>
+    )
+  }
   return (
     <TouchableOpacity
-      style={style}
       onPress={onPress}
       onLongPress={onLongPress}
-      delayPressIn={50}>
+      delayPressIn={50}
+      style={style}>
       {children ? children : <Text>{title || 'link'}</Text>}
     </TouchableOpacity>
   )
diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx
index ae9212a720..5e1d570b68 100644
--- a/src/view/com/util/PostEmbeds.tsx
+++ b/src/view/com/util/PostEmbeds.tsx
@@ -97,7 +97,7 @@ export function PostEmbeds({
     const externalEmbed = embed as AppBskyEmbedExternal.Presented
     const link = externalEmbed.external
     return (
-      <Link style={[styles.extOuter, style]} href={link.uri}>
+      <Link style={[styles.extOuter, style]} href={link.uri} noFeedback>
         {link.thumb ? (
           <AutoSizedImage style={style} uri={link.thumb} />
         ) : undefined}
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index a1281e0d77..732b47683e 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -37,7 +37,10 @@ export const Settings = observer(function Settings({
             <Text style={[s.blue3, s.bold]}>Sign out</Text>
           </TouchableOpacity>
         </View>
-        <Link href={`/profile/${store.me.handle}`} title="Your profile">
+        <Link
+          href={`/profile/${store.me.handle}`}
+          title="Your profile"
+          noFeedback>
           <View style={styles.profile}>
             <UserAvatar
               size={40}