diff --git a/apps/desktop/layer/renderer/src/components/ui/modal/inspire/PeekModal.tsx b/apps/desktop/layer/renderer/src/components/ui/modal/inspire/PeekModal.tsx index 7de5e05a4..63eeefc54 100644 --- a/apps/desktop/layer/renderer/src/components/ui/modal/inspire/PeekModal.tsx +++ b/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) => { const { dismissAll } = useModalStack() const { to, children } = props diff --git a/apps/desktop/layer/renderer/src/components/ui/peek-modal/EntryModalPreview.tsx b/apps/desktop/layer/renderer/src/components/ui/peek-modal/EntryModalPreview.tsx index 15a48db77..b10b8f683 100644 --- a/apps/desktop/layer/renderer/src/components/ui/peek-modal/EntryModalPreview.tsx +++ b/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 }) => ( - - - -) +export const EntryModalPreview = ({ entryId }: { entryId: string }) => { + const { isPending } = usePrefetchEntryDetail(entryId) + + return ( + + {isPending ? ( + + ) : ( + + )} + + ) +} + +const PeekModalSkeleton = () => { + return ( +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ ) +} diff --git a/apps/desktop/layer/renderer/src/hooks/biz/usePeekModal.tsx b/apps/desktop/layer/renderer/src/hooks/biz/usePeekModal.tsx index 0da2a2992..fb51301a4 100644 --- a/apps/desktop/layer/renderer/src/hooks/biz/usePeekModal.tsx +++ b/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 (