usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-12-17 22:28:52 +08:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Steven 2025-10-30 22:25:19 +08:00
parent 5e47f25bf5
commit 1e954070b9
3 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/MemoSkeleton.tsx
View file

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

5
web/src/components/MemoView.tsx
View file

@ -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={{

7
web/src/components/PagedMemoList/PagedMemoList.tsx
View file

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