Set profile hover prefetch stale time to 30s (#4417)

* Set prefetch stale time to 30s

* Run prefetch on mouseOver

* Only prefetch once on mousemove

src/state/queries/profile.ts

@@ -94,6 +94,7 @@ export function usePrefetchProfileQuery() {
   const prefetchProfileQuery = useCallback(
     async (did: string) => {
       await queryClient.prefetchQuery({
+        staleTime: STALE.SECONDS.THIRTY,
         queryKey: RQKEY(did),
         queryFn: async () => {
           const res = await agent.getProfile({actor: did || ''})

src/view/com/util/PostMeta.tsx

@@ -11,6 +11,7 @@ import {sanitizeHandle} from 'lib/strings/handles'
 import {niceDate} from 'lib/strings/time'
 import {TypographyVariant} from 'lib/ThemeContext'
 import {isAndroid, isWeb} from 'platform/detection'
+import {atoms as a} from '#/alf'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {TextLinkOnWebOnly} from './Link'
 import {Text} from './text/Text'
@@ -39,9 +40,13 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
   const prefetchProfileQuery = usePrefetchProfileQuery()
 
   const profileLink = makeProfileLink(opts.author)
-  const onPointerEnter = isWeb
+  const prefetchedProfile = React.useRef(false)
-    ? () => prefetchProfileQuery(opts.author.did)
+  const onPointerMove = React.useCallback(() => {
-    : undefined
+    if (!prefetchedProfile.current) {
+      prefetchedProfile.current = true
+      prefetchProfileQuery(opts.author.did)
+    }
+  }, [opts.author.did, prefetchProfileQuery])
 
   const queryClient = useQueryClient()
   const onOpenAuthor = opts.onOpenAuthor
@@ -66,37 +71,39 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
         </View>
       )}
       <ProfileHoverCard inline did={opts.author.did}>
-        <Text
+        <View
-          numberOfLines={1}
+          onPointerMove={isWeb ? onPointerMove : undefined}
-          style={[styles.maxWidth, pal.textLight, opts.displayNameStyle]}>
+          style={[a.flex_1]}>
-          <TextLinkOnWebOnly
+          <Text
-            type={opts.displayNameType || 'lg-bold'}
+            numberOfLines={1}
-            style={[pal.text]}
+            style={[styles.maxWidth, pal.textLight, opts.displayNameStyle]}>
-            lineHeight={1.2}
+            <TextLinkOnWebOnly
-            disableMismatchWarning
+              type={opts.displayNameType || 'lg-bold'}
-            text={
+              style={[pal.text]}
-              <>
+              lineHeight={1.2}
-                {sanitizeDisplayName(
+              disableMismatchWarning
-                  displayName,
+              text={
-                  opts.moderation?.ui('displayName'),
+                <>
-                )}
+                  {sanitizeDisplayName(
-              </>
+                    displayName,
-            }
+                    opts.moderation?.ui('displayName'),
-            href={profileLink}
+                  )}
-            onBeforePress={onBeforePressAuthor}
+                </>
-            onPointerEnter={onPointerEnter}
+              }
-          />
+              href={profileLink}
-          <TextLinkOnWebOnly
+              onBeforePress={onBeforePressAuthor}
-            type="md"
+            />
-            disableMismatchWarning
+            <TextLinkOnWebOnly
-            style={[pal.textLight, {flexShrink: 4}]}
+              type="md"
-            text={'\xa0' + sanitizeHandle(handle, '@')}
+              disableMismatchWarning
-            href={profileLink}
+              style={[pal.textLight, {flexShrink: 4}]}
-            onBeforePress={onBeforePressAuthor}
+              text={'\xa0' + sanitizeHandle(handle, '@')}
-            onPointerEnter={onPointerEnter}
+              href={profileLink}
-            anchorNoUnderline
+              onBeforePress={onBeforePressAuthor}
-          />
+              anchorNoUnderline
-        </Text>
+            />
+          </Text>
+        </View>
       </ProfileHoverCard>
       {!isAndroid && (
         <Text