From 3faac497e9481eccc3efddc70fdfd283f18e7ac3 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Fri, 25 Jul 2025 16:39:10 +0800
Subject: [PATCH] fix(mobile): improve social media skeleton

---
 apps/mobile/ios/Folo/Info.plist               |  2 +-
 .../entry-list/EntryListContentSocial.tsx     | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/apps/mobile/ios/Folo/Info.plist b/apps/mobile/ios/Folo/Info.plist
index 10bceefc2..8b9264686 100644
--- a/apps/mobile/ios/Folo/Info.plist
+++ b/apps/mobile/ios/Folo/Info.plist
@@ -53,7 +53,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>116</string>
+	<string>117</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationCategoryType</key>
diff --git a/apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx b/apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx
index 7e1bd29f1..33d35f0b6 100644
--- a/apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx
+++ b/apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx
@@ -5,9 +5,7 @@ import { useCallback, useImperativeHandle, useMemo, useRef } from "react"
 import { View } from "react-native"
 
 import { useActionLanguage, useGeneralSettingKey } from "@/src/atoms/settings/general"
-import { useBottomTabBarHeight } from "@/src/components/layouts/tabbar/hooks"
 import { checkLanguage } from "@/src/lib/translation"
-import { useHeaderHeight } from "@/src/modules/screen/hooks/useHeaderHeight"
 
 import { useEntries } from "../screen/atoms"
 import { TimelineSelectorList } from "../screen/TimelineSelectorList"
@@ -55,17 +53,18 @@ export const EntryListContentSocial = ({
     checkLanguage,
   })
 
-  const headerHeight = useHeaderHeight()
-  const tabBarHeight = useBottomTabBarHeight()
-
   // Show loading skeleton when entries are not ready and no data yet
   if (!isReady && (!entryIds || entryIds.length === 0)) {
     return (
-      <View className="flex-1" style={{ paddingTop: headerHeight, paddingBottom: tabBarHeight }}>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <EntryItemSkeleton key={index} />
-        ))}
-      </View>
+      <TimelineSelectorList
+        onRefresh={() => {}}
+        isRefetching={false}
+        data={Array.from({ length: 5 }).map((_, index) => `skeleton-${index}`)}
+        keyExtractor={(id) => id}
+        estimatedItemSize={5}
+        renderItem={EntryItemSkeleton}
+        ItemSeparatorComponent={ItemSeparatorFullWidth}
+      />
     )
   }