about summary refs log tree commit diff
path: root/src/view/com/util/LoadingPlaceholder.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/util/LoadingPlaceholder.tsx')
-rw-r--r--src/view/com/util/LoadingPlaceholder.tsx54
1 files changed, 54 insertions, 0 deletions
diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index bf39fd50c..d7ab1be54 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -174,6 +174,60 @@ export function ProfileCardFeedLoadingPlaceholder() {
   )
 }
 
+export function FeedLoadingPlaceholder({
+  style,
+}: {
+  style?: StyleProp<ViewStyle>
+}) {
+  const pal = usePalette('default')
+  return (
+    <View
+      style={[
+        {paddingHorizontal: 12, paddingVertical: 18, borderTopWidth: 1},
+        pal.border,
+        style,
+      ]}>
+      <View style={[pal.view, {flexDirection: 'row', marginBottom: 10}]}>
+        <LoadingPlaceholder
+          width={36}
+          height={36}
+          style={[styles.avatar, {borderRadius: 6}]}
+        />
+        <View style={[s.flex1]}>
+          <LoadingPlaceholder width={100} height={8} style={[s.mt5, s.mb10]} />
+          <LoadingPlaceholder width={120} height={8} />
+        </View>
+      </View>
+      <View style={{paddingHorizontal: 5}}>
+        <LoadingPlaceholder
+          width={260}
+          height={8}
+          style={{marginVertical: 12}}
+        />
+        <LoadingPlaceholder width={120} height={8} />
+      </View>
+    </View>
+  )
+}
+
+export function FeedFeedLoadingPlaceholder() {
+  return (
+    <>
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+      <FeedLoadingPlaceholder />
+    </>
+  )
+}
+
 const styles = StyleSheet.create({
   loadingPlaceholder: {
     borderRadius: 6,