Skip to content

Commit

Permalink
feat: skeleton ui component
Browse files Browse the repository at this point in the history
  • Loading branch information
@DIYgod
DIYgod committed Jul 29, 2024
1 parent b3b882c commit a070b84
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 44 deletions.
15 changes: 15 additions & 0 deletions src/renderer/src/components/ui/skeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { cn } from "@renderer/lib/utils"

function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn("animate-pulse rounded-md bg-gray-200 dark:bg-neutral-800", className)}
{...props}
/>
)
}

export { Skeleton }
17 changes: 9 additions & 8 deletions src/renderer/src/modules/entry-column/article-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Skeleton } from "@renderer/components/ui/skeleton"
import { ListItem } from "@renderer/modules/entry-column/list-item-template"

import type { UniversalItemProps } from "./types"
Expand All @@ -21,23 +22,23 @@ 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 rounded-sm bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="mr-2 size-5 rounded-sm" />
<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 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3 w-24" />
<span>·</span>
<div className="h-3 w-12 shrink-0 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3 w-12 shrink-0" />
</div>
<div className="relative my-1 break-words font-medium">
<div className="h-3.5 w-full bg-gray-200 dark:bg-neutral-800" />
<div className="mt-1 h-3.5 w-3/4 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3.5 w-full" />
<Skeleton className="mt-1 h-3.5 w-3/4" />
</div>
<div className="mt-1.5 text-[13px] text-zinc-400 dark:text-neutral-500">
<div className="h-3 w-full bg-gray-200 dark:bg-neutral-800" />
<div className="mt-1 h-3 w-4/5 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3 w-full" />
<Skeleton className="mt-1 h-3 w-4/5" />
</div>
</div>
<div className="ml-2 size-20 overflow-hidden rounded bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="ml-2 size-20 overflow-hidden rounded" />
</div>
</div>
</div>
Expand Down
11 changes: 6 additions & 5 deletions src/renderer/src/modules/entry-column/audio-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Skeleton } from "@renderer/components/ui/skeleton"
import { ListItem } from "@renderer/modules/entry-column/list-item-template"

import type { UniversalItemProps } from "./types"
Expand All @@ -23,17 +24,17 @@ export const AudioItemSkeleton = (
<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 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3 w-20" />
<span>·</span>
<div className="h-3 w-10 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3 w-10 " />
</div>
<div className="relative my-0.5 break-words font-medium">
<div className="h-4 w-full bg-gray-200 dark:bg-neutral-800" />
<div className="mt-2 h-4 w-3/4 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-4 w-full " />
<Skeleton className="mt-2 h-4 w-3/4 " />
</div>
</div>
<div className="relative ml-2 size-20 shrink-0">
<div className="mr-2 size-20 shrink-0 overflow-hidden rounded-sm bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="mr-2 size-20 shrink-0 overflow-hidden rounded-sm " />
</div>
</div>
</div>
Expand Down
11 changes: 6 additions & 5 deletions src/renderer/src/modules/entry-column/notification-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Skeleton } from "@renderer/components/ui/skeleton"
import { ListItem } from "@renderer/modules/entry-column/list-item-template"

import type { UniversalItemProps } from "./types"
Expand All @@ -19,16 +20,16 @@ export function NotificationItem({
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 overflow-hidden rounded-sm bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="mr-2 size-5 shrink-0 overflow-hidden rounded-sm " />
<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 truncate bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3 w-32 truncate " />
<span>·</span>
<div className="h-3 w-12 shrink-0 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3 w-12 shrink-0 " />
</div>
<div className="relative my-0.5 break-words">
<div className="h-4 w-full bg-gray-200 dark:bg-neutral-800" />
<div className="mt-2 h-4 w-3/4 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-4 w-full " />
<Skeleton className="mt-2 h-4 w-3/4 " />
</div>
</div>
</div>
Expand Down
11 changes: 6 additions & 5 deletions src/renderer/src/modules/entry-column/picture-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { SwipeMedia } from "@renderer/components/ui/media/swipe-media"
import { ReactVirtuosoItemPlaceholder } from "@renderer/components/ui/placeholder"
import { Skeleton } from "@renderer/components/ui/skeleton"
import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
import { cn } from "@renderer/lib/utils"
import { GridItem } from "@renderer/modules/entry-column/grid-item-template"
Expand Down Expand Up @@ -51,18 +52,18 @@ export const PictureItemSkeleton = (
<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 overflow-hidden rounded-none bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="size-full overflow-hidden" />
</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 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-4 w-3/4 " />
</div>
<div className="mt-1 flex items-center gap-1 truncate text-[13px]">
<div className="mr-0.5 size-4 rounded-sm bg-gray-200 dark:bg-neutral-800" />
<div className="h-3 w-1/2 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="mr-0.5 size-4" />
<Skeleton className="h-3 w-1/2 " />
<span className="text-zinc-500">·</span>
<div className="h-3 w-12 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3 w-12 " />
</div>
</div>
</div>
Expand Down
24 changes: 8 additions & 16 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 @@ -3,6 +3,7 @@ import { ActionButton } from "@renderer/components/ui/button"
import { RelativeTime } from "@renderer/components/ui/datetime"
import { Media } from "@renderer/components/ui/media"
import { usePreviewMedia } from "@renderer/components/ui/media/hooks"
import { Skeleton } from "@renderer/components/ui/skeleton"
import { useAsRead } from "@renderer/hooks/biz/useAsRead"
import { useEntryActions } from "@renderer/hooks/biz/useEntryActions"
import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
Expand Down Expand Up @@ -139,31 +140,22 @@ 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 rounded-sm bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="mr-2 size-9" />
<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 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-4 w-16 " />
<span className="text-zinc-500">·</span>
<div className="h-4 w-12 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-4 w-12 " />
</div>
<div className="relative mt-0.5 whitespace-pre-line text-base">
<div className="h-4 w-full bg-gray-200 dark:bg-neutral-800" />
<div className="mt-1.5 h-4 w-full bg-gray-200 dark:bg-neutral-800" />
<div className="mt-1.5 h-4 w-3/4 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-4 w-full " />
<Skeleton className="mt-1.5 h-4 w-full " />
<Skeleton className="mt-1.5 h-4 w-3/4 " />
</div>
</div>
<div className="mt-2 flex gap-2 overflow-x-auto">
<div className="size-28 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 justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
<div className="size-8 justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
<div className="size-8 justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
<div className="size-8 justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
<div className="size-8 justify-center rounded-md bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="size-28 overflow-hidden rounded " />
</div>
</div>
</div>
Expand Down
11 changes: 6 additions & 5 deletions src/renderer/src/modules/entry-column/video-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Media } from "@renderer/components/ui/media"
import type { ModalContentComponent } from "@renderer/components/ui/modal"
import { useModalStack } from "@renderer/components/ui/modal"
import { NoopChildren } from "@renderer/components/ui/modal/stacked/utils"
import { Skeleton } from "@renderer/components/ui/skeleton"
import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
import { urlToIframe } from "@renderer/lib/url-to-iframe"
import { cn } from "@renderer/lib/utils"
Expand Down Expand Up @@ -157,18 +158,18 @@ export const VideoItemSkeleton = (
<div className="p-1.5">
<div className="w-full">
<div className="overflow-x-auto">
<div className="aspect-video w-full shrink-0 overflow-hidden rounded-md bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="aspect-video w-full shrink-0 overflow-hidden" />
</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 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-4 w-3/4 " />
</div>
<div className="mt-1 flex items-center gap-1 truncate text-[13px]">
<div className="mr-0.5 size-4 rounded-sm bg-gray-200 dark:bg-neutral-800" />
<div className="h-3 w-1/2 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="mr-0.5 size-4" />
<Skeleton className="h-3 w-1/2 " />
<span className="text-zinc-500">·</span>
<div className="h-3 w-12 bg-gray-200 dark:bg-neutral-800" />
<Skeleton className="h-3 w-12 " />
</div>
</div>
</div>
Expand Down

0 comments on commit a070b84

Please sign in to comment.