2 files changed, 60 insertions, 7 deletions
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index df4728a54..f054a40f2 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -33,6 +33,7 @@ import {MAX_POST_LINES} from 'lib/constants'
 import {countLines} from 'lib/strings/helpers'
 import {useComposerControls} from '#/state/shell/composer'
 import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow'
+import {FeedNameText} from '../util/FeedInfoText'
 
 export function FeedItem({
   post,
@@ -177,22 +178,20 @@ let FeedItemInner = ({
 
         <View style={{paddingTop: 12, flexShrink: 1}}>
           {isReasonFeedSource(reason) ? (
-            <Link
-              title={sanitizeDisplayName(reason.displayName)}
-              href={reason.uri}>
+            <Link href={reason.href}>
               <Text
                 type="sm-bold"
                 style={pal.textLight}
                 lineHeight={1.2}
                 numberOfLines={1}>
                 From{' '}
-                <TextLinkOnWebOnly
+                <FeedNameText
                   type="sm-bold"
-                  style={pal.textLight}
+                  uri={reason.uri}
+                  href={reason.href}
                   lineHeight={1.2}
                   numberOfLines={1}
-                  text={sanitizeDisplayName(reason.displayName)}
-                  href={reason.uri}
+                  style={pal.textLight}
                 />
               </Text>
             </Link>
diff --git a/src/view/com/util/FeedInfoText.tsx b/src/view/com/util/FeedInfoText.tsx
new file mode 100644
index 000000000..54124c739
--- /dev/null
+++ b/src/view/com/util/FeedInfoText.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import {StyleProp, StyleSheet, TextStyle} from 'react-native'
+import {TextLinkOnWebOnly} from './Link'
+import {LoadingPlaceholder} from './LoadingPlaceholder'
+import {TypographyVariant} from 'lib/ThemeContext'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {useFeedSourceInfoQuery} from '#/state/queries/feed'
+
+export function FeedNameText({
+  type = 'md',
+  uri,
+  href,
+  lineHeight,
+  numberOfLines,
+  style,
+}: {
+  type?: TypographyVariant
+  uri: string
+  href: string
+  lineHeight?: number
+  numberOfLines?: number
+  style?: StyleProp<TextStyle>
+}) {
+  const {data, isError} = useFeedSourceInfoQuery({uri})
+
+  let inner
+  if (data?.displayName || isError) {
+    const displayName = data?.displayName || uri.split('/').pop() || ''
+    inner = (
+      <TextLinkOnWebOnly
+        type={type}
+        style={style}
+        lineHeight={lineHeight}
+        numberOfLines={numberOfLines}
+        href={href}
+        text={sanitizeDisplayName(displayName)}
+      />
+    )
+  } else {
+    inner = (
+      <LoadingPlaceholder
+        width={80}
+        height={8}
+        style={styles.loadingPlaceholder}
+      />
+    )
+  }
+
+  return inner
+}
+
+const styles = StyleSheet.create({
+  loadingPlaceholder: {position: 'relative', top: 1, left: 2},
+})