refactor(web): improve memo component skeleton and loading states

pull/5075/merge
Steven 5 days ago
parent 5e47f25bf5
commit 1e954070b9

@ -11,7 +11,7 @@ const MemoSkeleton = ({ showCreator = false, count = 6 }: Props) => {
{Array.from({ length: count }).map((_, index) => (
<div
key={index}
className="relative flex flex-col justify-start items-start bg-card w-full px-4 py-3 mb-2 gap-2 rounded-lg border border-border animate-pulse"
className="relative flex flex-col justify-start items-start bg-card w-full max-w-2xl mx-auto px-4 py-3 mb-2 gap-2 rounded-lg border border-border animate-pulse"
>
{/* Header section */}
<div className="w-full flex flex-row justify-between items-center gap-2">

@ -194,7 +194,10 @@ const MemoView: React.FC<Props> = observer((props: Props) => {
)}
{!isInMemoDetailPage && (
<Link
className="flex flex-row justify-start items-center rounded-md p-1 hover:opacity-80"
className={cn(
"flex flex-row justify-start items-center rounded-md p-1 hover:opacity-80",
commentAmount === 0 && "invisible group-hover:visible",
)}
to={`/${memo.name}#comments`}
viewTransition
state={{

@ -145,10 +145,9 @@ const PagedMemoList = observer((props: Props) => {
<div className="flex flex-col justify-start items-start w-full max-w-full">
{/* Show skeleton loader during initial load */}
{isRequesting && sortedMemoList.length === 0 ? (
<>
{showMemoEditor && <MemoEditor className="mb-2" cacheKey="home-memo-editor" />}
<MemoSkeleton showCreator={props.showCreator} count={6} />
</>
<div className="w-full flex flex-col justify-start items-center">
<MemoSkeleton showCreator={props.showCreator} count={4} />
</div>
) : (
<>
<MasonryView

Loading…
Cancel
Save