fix: improve skeleton loading states in feed preview (#3265)

apps/desktop/src/renderer/src/modules/entry-column/item.tsx

@@ -63,26 +63,23 @@ const LoadingCircleFallback = (
 export const EntryItemSkeleton: FC<{
   view: FeedViewType
   count?: number
-}> = memo(({ view, count }) => {
+}> = memo(({ view, count = 10 }) => {
   const SkeletonItem = getSkeletonItemComponentByView(view)
+
+  if (!SkeletonItem) {
+    return LoadingCircleFallback
+  }
+
   if (count === 1) {
     return SkeletonItem
   }
 
-  return SkeletonItem ? (
+  return (
     <div className={cn(views[view]!.gridMode ? girdClassNames : "flex flex-col")}>
-      {SkeletonItem}
-      {SkeletonItem}
-      {SkeletonItem}
-      {SkeletonItem}
-      {SkeletonItem}
-      {SkeletonItem}
-      {SkeletonItem}
-      {SkeletonItem}
-      {SkeletonItem}
-      {SkeletonItem}
+      {Array.from({ length: count }).map((_, index) => (
+        // eslint-disable-next-line @eslint-react/no-array-index-key -- index is unique
+        <div key={index}>{SkeletonItem}</div>
+      ))}
     </div>
-  ) : (
-    LoadingCircleFallback
   )
 })

apps/desktop/src/renderer/src/modules/profile/user-profile-modal.shared.tsx

@@ -175,7 +175,7 @@ const SubscriptionItem: FC<{
               ) : (
                 <>
                   <FollowIcon className="mr-1 size-3" />
-                  {APP_NAME}
+                  {t("feed_form.follow")}
                 </>
               )}
             </Button>

apps/desktop/src/renderer/src/modules/shared/ViewSelectorRadioGroup.tsx

@@ -1,11 +1,12 @@
 import { Card, CardContent, CardHeader } from "@follow/components/ui/card/index.jsx"
-import { views } from "@follow/constants"
+import { FeedViewType, views } from "@follow/constants"
 import type { EntryModelSimple, FeedModel } from "@follow/models"
 import { cn } from "@follow/utils/utils"
 import { cloneElement, forwardRef } from "react"
 
 import { useI18n } from "~/hooks/common"
 
+import { EntryItemSkeleton } from "../entry-column/item"
 import { EntryItemStateless } from "../entry-column/item-stateless"
 
 export const ViewSelectorRadioGroup = forwardRef<
@@ -50,12 +51,14 @@ export const ViewSelectorRadioGroup = forwardRef<
           </div>
         ))}
       </CardHeader>
-      {!!feed && !!entries && (
+      {!!feed && !!entries ? (
         <CardContent className="space-y-2 p-2">
           {entries.slice(0, 2).map((entry) => (
             <EntryItemStateless entry={entry} feed={feed} view={view} key={entry.guid} />
           ))}
         </CardContent>
+      ) : (
+        <EntryItemSkeleton view={view ?? FeedViewType.Articles} count={2} />
       )}
     </Card>
   )