feat: skeleton ui component

src/renderer/src/components/ui/skeleton.tsx

@@ -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 }

src/renderer/src/modules/entry-column/article-item.tsx

@@ -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"
@@ -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>

src/renderer/src/modules/entry-column/audio-item.tsx

@@ -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"
@@ -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>

src/renderer/src/modules/entry-column/notification-item.tsx

@@ -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"
@@ -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>

src/renderer/src/modules/entry-column/picture-item.tsx

@@ -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"
@@ -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>

src/renderer/src/modules/entry-column/social-media-item.tsx

@@ -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"
@@ -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>

src/renderer/src/modules/entry-column/video-item.tsx

@@ -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"
@@ -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>