Skip to content

Commit

Permalink
feat: add entry item skeleton
Browse files Browse the repository at this point in the history 
Signed-off-by: Innei <i@innei.in>
  • Loading branch information
@Innei
Innei committed Jul 29, 2024
1 parent 8953b7f commit d11cc27
Show file tree
Hide file tree
Showing 11 changed files with 260 additions and 34 deletions.
3 changes: 2 additions & 1 deletion src/renderer/src/components/ui/marquee/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const TitleMarquee = ({
return (
<div
ref={$wrapper}
// className="[&_*]:scrollbar-none"
onMouseEnter={useCallback(() => {
const $container = ref.current

Expand Down Expand Up @@ -48,7 +49,7 @@ export const TitleMarquee = ({
})
}, [])}
>
<Marquee play={hovered} ref={ref} speed={speed} {...rest}>
<Marquee className="overflow-hidden" play={hovered} ref={ref} speed={speed} {...rest}>
{children}
</Marquee>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/hooks/biz/useFeedActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export const useFeedActions = ({
},
{
type: "text" as const,
label: "Copy Feed Id",
label: "Copy Feed ID",
disabled: isEntryList,
click: () => {
navigator.clipboard.writeText(feedId)
Expand Down
39 changes: 37 additions & 2 deletions src/renderer/src/modules/entry-column/article-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,43 @@ import { ListItem } from "@renderer/modules/entry-column/list-item-template"

import type { UniversalItemProps } from "./types"

export function ArticleItem({ entryId, entryPreview, translation }: UniversalItemProps) {
export function ArticleItem({
entryId,
entryPreview,
translation,
}: UniversalItemProps) {
return (
<ListItem entryId={entryId} entryPreview={entryPreview} translation={translation} withDetails />
<ListItem
entryId={entryId}
entryPreview={entryPreview}
translation={translation}
withDetails
/>
)
}

export const ArticleItemSkeleton = (
<div className="relative h-[120px] rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
<div className="relative z-[1]">
<div className="group relative flex py-4 pl-3 pr-2">
<div className="mr-2 size-5 animate-pulse rounded-sm bg-gray-200 dark:bg-neutral-800" />
<div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">
<div className="flex gap-1 text-[10px] font-bold text-zinc-400 dark:text-neutral-500">
<div className="h-3 w-24 animate-pulse bg-gray-200 dark:bg-neutral-800" />
<span>·</span>
<div className="h-3 w-12 shrink-0 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
<div className="relative my-1 break-words font-medium">
<div className="h-3.5 w-full animate-pulse bg-gray-200 dark:bg-neutral-800" />
<div className="mt-1 h-3.5 w-3/4 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
<div className="mt-1.5 text-[13px] text-zinc-400 dark:text-neutral-500">
<div className="h-3 w-full animate-pulse bg-gray-200 dark:bg-neutral-800" />
<div className="mt-1 h-3 w-4/5 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
<div className="ml-2 size-20 animate-pulse overflow-hidden rounded bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
</div>
)
36 changes: 34 additions & 2 deletions src/renderer/src/modules/entry-column/audio-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,40 @@ import { ListItem } from "@renderer/modules/entry-column/list-item-template"

import type { UniversalItemProps } from "./types"

export function AudioItem({ entryId, entryPreview, translation }: UniversalItemProps) {
export function AudioItem({
entryId,
entryPreview,
translation,
}: UniversalItemProps) {
return (
<ListItem entryId={entryId} entryPreview={entryPreview} translation={translation} withAudio />
<ListItem
entryId={entryId}
entryPreview={entryPreview}
translation={translation}
withAudio
/>
)
}

export const AudioItemSkeleton = (
<div className="relative mx-auto w-full max-w-lg rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
<div className="relative z-[1]">
<div className="group relative flex py-4 pl-3 pr-2">
<div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">
<div className="flex gap-1 text-[10px] font-bold text-zinc-400 dark:text-neutral-500">
<div className="h-3 w-20 animate-pulse bg-gray-200 dark:bg-neutral-800" />
<span>·</span>
<div className="h-3 w-10 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
<div className="relative my-0.5 break-words font-medium">
<div className="h-4 w-full animate-pulse bg-gray-200 dark:bg-neutral-800" />
<div className="mt-2 h-4 w-3/4 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
<div className="relative ml-2 size-20 shrink-0">
<div className="mr-2 size-20 shrink-0 animate-pulse overflow-hidden rounded-sm bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
</div>
</div>
)
12 changes: 4 additions & 8 deletions src/renderer/src/modules/entry-column/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ import type { VirtuosoHandle, VirtuosoProps } from "react-virtuoso"
import { Virtuoso, VirtuosoGrid } from "react-virtuoso"

import { useEntriesByView, useEntryMarkReadHandler } from "./hooks"
import { EntryItem } from "./item"
import { EntryItem, EntryItemSkeleton } from "./item"

export function EntryColumn() {
const virtuosoRef = useRef<VirtuosoHandle>(null)
Expand Down Expand Up @@ -98,12 +98,8 @@ export function EntryColumn() {

Footer: useCallback(() => {
if (!isFetchingNextPage) return null
return (
<div className="center mt-2">
<LoadingCircle size="medium" />
</div>
)
}, [isFetchingNextPage]),
return <EntryItemSkeleton view={view} />
}, [isFetchingNextPage, view]),
},
rangeChanged: (...args: any[]) => {
handleMarkReadInRange &&
Expand All @@ -126,7 +122,7 @@ export function EntryColumn() {
},
[view],
),
}
} satisfies VirtuosoProps<string, unknown>

const navigate = useNavigateEntry()
return (
Expand Down
71 changes: 56 additions & 15 deletions src/renderer/src/modules/entry-column/item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useGeneralSettingKey } from "@renderer/atoms/settings/general"
import { ListItemHoverOverlay } from "@renderer/components/ui/list-item-hover-overlay"
import { LoadingCircle } from "@renderer/components/ui/loading"
import { views } from "@renderer/constants"
import { useAsRead } from "@renderer/hooks/biz/useAsRead"
import { useEntryActions } from "@renderer/hooks/biz/useEntryActions"
Expand All @@ -14,18 +15,21 @@ import { Queries } from "@renderer/queries"
import type { FlatEntryModel } from "@renderer/store/entry"
import { entryActions } from "@renderer/store/entry"
import { useEntry } from "@renderer/store/entry/hooks"
import type { FC } from "react"
import type { FC, ReactNode } from "react"
import { memo, useCallback } from "react"
import { useDebounceCallback } from "usehooks-ts"

import { ReactVirtuosoItemPlaceholder } from "../../components/ui/placeholder"
import { ArticleItem } from "./article-item"
import { AudioItem } from "./audio-item"
import { NotificationItem } from "./notification-item"
import { PictureItem } from "./picture-item"
import { SocialMediaItem } from "./social-media-item"
import { ArticleItem, ArticleItemSkeleton } from "./article-item"
import { AudioItem, AudioItemSkeleton } from "./audio-item"
import {
NotificationItem,
NotificationItemSkeleton,
} from "./notification-item"
import { PictureItem, PictureItemSkeleton } from "./picture-item"
import { SocialMediaItem, SocialMediaItemSkeleton } from "./social-media-item"
import type { EntryListItemFC } from "./types"
import { VideoItem } from "./video-item"
import { VideoItem, VideoItemSkeleton } from "./video-item"

interface EntryItemProps {
entryId: string
Expand Down Expand Up @@ -139,25 +143,25 @@ function EntryItemImpl({
e.preventDefault()
showNativeMenu(
[
...(items
...items
.filter((item) => !item.disabled)
.map((item) => ({
type: "text" as const,
label: item.name,
click: item.onClick,
shortcut: item.shortcut,
}))),
})),
{
type: "separator" as const,
},
...(feedItems.filter((item) => !item.disabled)),
...feedItems.filter((item) => !item.disabled),

{
type: "separator" as const,
},
{
type: "text" as const,
label: "Copy Entry Id",
label: "Copy Entry ID",
click: () => {
navigator.clipboard.writeText(entry.entries.id)
},
Expand All @@ -170,9 +174,7 @@ function EntryItemImpl({
)

return (
<div
data-entry-id={entry.entries.id}
>
<div data-entry-id={entry.entries.id}>
<div
className={cn(
"relative rounded-md bg-theme-background transition-colors",
Expand All @@ -186,7 +188,11 @@ function EntryItemImpl({
onDoubleClick={handleDoubleClick}
onContextMenu={handleContextMenu}
>
<ListItemHoverOverlay className={cn(views[view || 0].gridMode ? "inset-0" : "inset-y-1")} isActive={isActive}>

<ListItemHoverOverlay
className={cn(views[view || 0].gridMode ? "inset-0" : "inset-y-1")}
isActive={isActive}
>
<Item entryId={entry.entries.id} translation={translation.data} />
</ListItemHoverOverlay>
</div>
Expand All @@ -199,3 +205,38 @@ export const EntryItem: FC<EntryItemProps> = memo(({ entryId, view }) => {
if (!entry) return <ReactVirtuosoItemPlaceholder />
return <EntryItemImpl entry={entry} view={view} />
})

const SkeletonItemMap = {
[FeedViewType.Articles]: ArticleItemSkeleton,
[FeedViewType.SocialMedia]: SocialMediaItemSkeleton,
[FeedViewType.Pictures]: PictureItemSkeleton,
[FeedViewType.Videos]: VideoItemSkeleton,
[FeedViewType.Audios]: AudioItemSkeleton,
[FeedViewType.Notifications]: NotificationItemSkeleton,
}

const LoadingCircleFallback = (
<div className="center mt-2">
<LoadingCircle size="medium" />
</div>
)
export const EntryItemSkeleton: FC<{ view: FeedViewType }> = memo(
({ view }) => {
const SkeletonItem = SkeletonItemMap[view]
return SkeletonItem ?
(
<div className="flex flex-col">{createSkeletonItems(SkeletonItem)}</div>
) :
(
LoadingCircleFallback
)
},
)

const createSkeletonItems = (element: ReactNode) => {
const children = [] as ReactNode[]
for (let i = 0; i < 10; i++) {
children.push(element)
}
return children
}
31 changes: 29 additions & 2 deletions src/renderer/src/modules/entry-column/notification-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,35 @@ import { ListItem } from "@renderer/modules/entry-column/list-item-template"

import type { UniversalItemProps } from "./types"

export function NotificationItem({ entryId, entryPreview, translation }: UniversalItemProps) {
export function NotificationItem({
entryId,
entryPreview,
translation,
}: UniversalItemProps) {
return (
<ListItem entryId={entryId} entryPreview={entryPreview} translation={translation} />
<ListItem
entryId={entryId}
entryPreview={entryPreview}
translation={translation}
/>
)
}

export const NotificationItemSkeleton = (
<div className="relative z-[1] mx-auto w-full max-w-lg">
<div className="group relative flex py-4 pl-3 pr-2">
<div className="mr-2 size-5 shrink-0 animate-pulse overflow-hidden rounded-sm bg-gray-200 dark:bg-neutral-800" />
<div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">
<div className="flex gap-1 text-[10px] font-bold text-zinc-400 dark:text-neutral-500">
<div className="h-3 w-32 animate-pulse truncate bg-gray-200 dark:bg-neutral-800" />
<span>·</span>
<div className="h-3 w-12 shrink-0 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
<div className="relative my-0.5 break-words">
<div className="h-4 w-full animate-pulse bg-gray-200 dark:bg-neutral-800" />
<div className="mt-2 h-4 w-3/4 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
</div>
</div>
)
25 changes: 25 additions & 0 deletions src/renderer/src/modules/entry-column/picture-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,28 @@ export function PictureItem({
</GridItem>
)
}

export const PictureItemSkeleton = (
<div className="relative mx-auto w-full max-w-md rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
<div className="relative z-[1]">
<div className="p-1.5">
<div className="relative flex gap-2 overflow-x-auto">
<div className="relative flex aspect-square w-full shrink-0 items-center overflow-hidden rounded-md">
<div className="size-full animate-pulse overflow-hidden rounded-none bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
<div className="relative flex-1 px-2 pb-3 pt-1 text-sm">
<div className="relative mb-1 mt-1.5 truncate font-medium leading-none">
<div className="h-4 w-3/4 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
<div className="mt-1 flex items-center gap-1 truncate text-[13px]">
<div className="mr-0.5 size-4 animate-pulse rounded-sm bg-gray-200 dark:bg-neutral-800" />
<div className="h-3 w-1/2 animate-pulse bg-gray-200 dark:bg-neutral-800" />
<span className="text-zinc-500">·</span>
<div className="h-3 w-12 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
</div>
</div>
</div>
)
40 changes: 37 additions & 3 deletions src/renderer/src/modules/entry-column/social-media-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import { Media } from "@renderer/components/ui/media"
import { usePreviewMedia } from "@renderer/components/ui/media/hooks"
import { useAsRead } from "@renderer/hooks/biz/useAsRead"
import { useEntryActions } from "@renderer/hooks/biz/useEntryActions"
import {
useRouteParamsSelector,
} from "@renderer/hooks/biz/useRouteParams"
import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
import { cn } from "@renderer/lib/utils"
import { useEntry } from "@renderer/store/entry/hooks"
import { useFeedById } from "@renderer/store/feed"
Expand Down Expand Up @@ -136,3 +134,39 @@ const ActionBar = ({ entryId }: { entryId: string }) => {
</div>
)
}

export const SocialMediaItemSkeleton = (
<div className="relative m-auto w-[75ch] rounded-md bg-theme-background text-zinc-700 transition-colors dark:text-neutral-400">
<div className="relative z-[1]">
<div className="group relative flex py-4 pl-3 pr-2">
<div className="mr-2 size-9 animate-pulse rounded-sm bg-gray-200 dark:bg-neutral-800" />
<div className="ml-2 min-w-0 flex-1">
<div className="-mt-0.5 line-clamp-5 flex-1 text-sm">
<div className="flex w-[calc(100%-10rem)] space-x-1">
<div className="h-4 w-16 animate-pulse bg-gray-200 dark:bg-neutral-800" />
<span className="text-zinc-500">·</span>
<div className="h-4 w-12 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
<div className="relative mt-0.5 whitespace-pre-line text-base">
<div className="h-4 w-full animate-pulse bg-gray-200 dark:bg-neutral-800" />
<div className="mt-1.5 h-4 w-full animate-pulse bg-gray-200 dark:bg-neutral-800" />
<div className="mt-1.5 h-4 w-3/4 animate-pulse bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
<div className="mt-2 flex gap-2 overflow-x-auto">
<div className="size-28 animate-pulse overflow-hidden rounded bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
<div className="invisible absolute right-1 top-1.5 opacity-0 duration-200 group-hover:visible group-hover:opacity-80">
<div className="flex origin-right scale-90 items-center gap-1">
<div className="size-8 animate-pulse justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
<div className="size-8 animate-pulse justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
<div className="size-8 animate-pulse justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
<div className="size-8 animate-pulse justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
<div className="size-8 animate-pulse justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
</div>
</div>
</div>
</div>
</div>
)
Loading

0 comments on commit d11cc27

Please sign in to comment.