fix(sns): sync my timeline count and auto load more

src/components/Sns/ContactSnsTimelineDialog.tsx

@@ -441,6 +441,14 @@ export function ContactSnsTimelineDialog({
     timelineLoadingMore
   ])
 
+  const handleBodyScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
+    const element = event.currentTarget
+    const remaining = element.scrollHeight - element.scrollTop - element.clientHeight
+    if (remaining <= 160) {
+      loadMore()
+    }
+  }, [loadMore])
+
   const toggleRankMode = useCallback((mode: ContactSnsRankMode) => {
     setRankMode((previous) => (previous === mode ? null : mode))
   }, [])
@@ -534,7 +542,10 @@ export function ContactSnsTimelineDialog({
           在微信桌面客户端中打开这个人的朋友圈浏览，可快速把其朋友圈同步到这里。若你在乎这个人，一定要试试～
         </div>
 
-        <div className="contact-sns-dialog-body">
+        <div
+          className="contact-sns-dialog-body"
+          onScroll={handleBodyScroll}
+        >
           {timelinePosts.length > 0 && (
             <div className="contact-sns-dialog-posts-list">
               {timelinePosts.map((post) => (

src/pages/SnsPage.scss

@@ -101,6 +101,12 @@
         .feed-my-timeline-count {
             color: var(--text-primary);
             font-weight: 600;
+            display: inline-flex;
+            align-items: center;
+
+            .spin {
+                animation: spin 0.8s linear infinite;
+            }
         }
 
         &.ready {

src/pages/SnsPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useState, useRef, useCallback, useMemo } from 'react'
-import { RefreshCw, Search, X, Download, FolderOpen, FileJson, FileText, Image, CheckCircle, AlertCircle, Calendar, Users, Info, ChevronLeft, ChevronRight, Shield, ShieldOff } from 'lucide-react'
+import { RefreshCw, Search, X, Download, FolderOpen, FileJson, FileText, Image, CheckCircle, AlertCircle, Calendar, Users, Info, ChevronLeft, ChevronRight, Shield, ShieldOff, Loader2 } from 'lucide-react'
 import JumpToDateDialog from '../components/JumpToDateDialog'
 import './SnsPage.scss'
 import { SnsPost } from '../types/sns'
@@ -274,18 +274,16 @@ export default function SnsPage() {
     }, [authorTimelineTarget, contacts])
 
     const myTimelineCount = useMemo(() => {
-        if (typeof overviewStats.myPosts === 'number' && Number.isFinite(overviewStats.myPosts) && overviewStats.myPosts >= 0) {
-            return Math.floor(overviewStats.myPosts)
-        }
         if (resolvedCurrentUserContact?.postCountStatus === 'ready' && typeof resolvedCurrentUserContact.postCount === 'number') {
             return normalizePostCount(resolvedCurrentUserContact.postCount)
         }
         return null
-    }, [normalizePostCount, overviewStats.myPosts, resolvedCurrentUserContact])
+    }, [normalizePostCount, resolvedCurrentUserContact])
 
     const myTimelineCountLoading = Boolean(
-        overviewStatsStatus === 'loading'
-        || resolvedCurrentUserContact?.postCountStatus === 'loading'
+        resolvedCurrentUserContact
+            ? resolvedCurrentUserContact.postCountStatus !== 'ready'
+            : overviewStatsStatus === 'loading' || contactsLoading
     )
 
     const openCurrentUserTimeline = useCallback(() => {
@@ -980,7 +978,7 @@ export default function SnsPage() {
                                     {myTimelineCount !== null
                                         ? `${myTimelineCount.toLocaleString('zh-CN')} 条`
                                         : myTimelineCountLoading
-                                            ? '...'
+                                            ? <Loader2 size={14} className="spin" aria-hidden="true" />
                                             : '--'}
                                 </span>
                             </button>