skeletons for chat list (#7907)

src/view/com/util/LoadingPlaceholder.tsx

@@ -1,3 +1,4 @@
+import {useMemo} from 'react'
 import {
   DimensionValue,
   StyleProp,
@@ -282,6 +283,47 @@ export function FeedFeedLoadingPlaceholder() {
   )
 }
 
+export function ChatListItemLoadingPlaceholder({
+  style,
+}: {
+  style?: StyleProp<ViewStyle>
+}) {
+  const t = useTheme_NEW()
+  const random = useMemo(() => Math.random(), [])
+  return (
+    <View style={[a.flex_row, a.gap_md, a.px_lg, a.mt_lg, t.atoms.bg, style]}>
+      <LoadingPlaceholder width={52} height={52} style={a.rounded_full} />
+      <View>
+        <LoadingPlaceholder width={140} height={12} style={a.mt_xs} />
+        <LoadingPlaceholder width={120} height={8} style={a.mt_sm} />
+        <LoadingPlaceholder
+          width={80 + random * 100}
+          height={8}
+          style={a.mt_sm}
+        />
+      </View>
+    </View>
+  )
+}
+
+export function ChatListLoadingPlaceholder() {
+  return (
+    <>
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+      <ChatListItemLoadingPlaceholder />
+    </>
+  )
+}
+
 const styles = StyleSheet.create({
   loadingPlaceholder: {
     borderRadius: 6,