feat(desktop): optimize PeekModal loading experience (#4284)

apps/desktop/layer/renderer/src/components/ui/modal/inspire/PeekModal.tsx

@@ -11,16 +11,16 @@ import { FixedModalCloseButton } from "../components/close"
 import { useCurrentModal, useModalStack } from "../stacked/hooks"
 import { InPeekModal } from "./InPeekModal"
 
-export const PeekModal = (
-  props: PropsWithChildren<{
-    to?: string
-    rightActions?: {
-      onClick: () => void
-      label: string
-      icon: ReactNode
-    }[]
-  }>,
-) => {
+interface PeekModalProps {
+  to?: string
+  rightActions?: {
+    onClick: () => void
+    label: string
+    icon: ReactNode
+  }[]
+}
+
+export const PeekModal = (props: PropsWithChildren<PeekModalProps>) => {
   const { dismissAll } = useModalStack()
 
   const { to, children } = props

apps/desktop/layer/renderer/src/components/ui/peek-modal/EntryModalPreview.tsx

@@ -1,11 +1,63 @@
+import { usePrefetchEntryDetail } from "@follow/store/entry/hooks"
+
 import { Paper } from "~/components/ui/paper"
 import { EntryContent } from "~/modules/entry-content/components/entry-content"
 
-export const EntryModalPreview = ({ entryId }: { entryId: string }) => (
-  <Paper className="p-0 !pt-16 empty:hidden">
-    <EntryContent
-      className="h-auto [&_#entry-action-header-bar]:!bg-transparent"
-      entryId={entryId}
-    />
-  </Paper>
-)
+export const EntryModalPreview = ({ entryId }: { entryId: string }) => {
+  const { isPending } = usePrefetchEntryDetail(entryId)
+
+  return (
+    <Paper className="p-0 !pt-16 empty:hidden">
+      {isPending ? (
+        <PeekModalSkeleton />
+      ) : (
+        <EntryContent
+          className="h-auto [&_#entry-action-header-bar]:!bg-transparent"
+          entryId={entryId}
+        />
+      )}
+    </Paper>
+  )
+}
+
+const PeekModalSkeleton = () => {
+  return (
+    <div className="animate-pulse p-5">
+      <div className="mb-6 space-y-3">
+        <div className="bg-fill h-8 w-3/4 rounded-lg" />
+        <div className="flex items-center space-x-4">
+          <div className="bg-fill-secondary h-4 w-20 rounded" />
+          <div className="bg-fill-secondary h-4 w-16 rounded" />
+          <div className="bg-fill-secondary h-4 w-24 rounded" />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <div className="space-y-3">
+          <div className="bg-fill-secondary h-4 w-full rounded" />
+          <div className="bg-fill-secondary h-4 w-5/6 rounded" />
+          <div className="bg-fill-secondary h-4 w-4/5 rounded" />
+        </div>
+
+        <div className="space-y-3">
+          <div className="bg-fill-secondary h-4 w-full rounded" />
+          <div className="bg-fill-secondary h-4 w-3/4 rounded" />
+        </div>
+
+        <div className="bg-fill my-6 h-48 w-full rounded-lg" />
+
+        <div className="space-y-3">
+          <div className="bg-fill-secondary h-4 w-full rounded" />
+          <div className="bg-fill-secondary h-4 w-5/6 rounded" />
+          <div className="bg-fill-secondary h-4 w-2/3 rounded" />
+        </div>
+      </div>
+
+      <div className="mt-8 flex items-center space-x-3">
+        <div className="bg-fill h-8 w-16 rounded" />
+        <div className="bg-fill h-8 w-20 rounded" />
+        <div className="w-18 bg-fill h-8 rounded" />
+      </div>
+    </div>
+  )
+}

apps/desktop/layer/renderer/src/hooks/biz/usePeekModal.tsx

@@ -1,4 +1,4 @@
-import { useEntry, usePrefetchEntryDetail } from "@follow/store/entry/hooks"
+import { useEntry } from "@follow/store/entry/hooks"
 import { useCallback } from "react"
 
 import { PeekModal } from "~/components/ui/modal/inspire/PeekModal"
@@ -35,9 +35,7 @@ export const usePeekModal = () => {
             "relative mx-auto mt-[10vh] scrollbar-none max-w-full overflow-auto px-2 lg:max-w-[65rem] lg:p-0",
 
           CustomModalComponent: ({ children }) => {
-            usePrefetchEntryDetail(entryId)
             const feedId = useEntry(entryId, (state) => state.feedId)
-
             if (!feedId) return null
 
             return (