1 files changed, 54 insertions, 0 deletions
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},
+})