happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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) => ( {Array.from({ length: count }).map((_, index) => (
<div <div
key={index} 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 */} {/* Header section */}
<div className="w-full flex flex-row justify-between items-center gap-2"> <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 && ( {!isInMemoDetailPage && (
<Link <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`} to={`/${memo.name}#comments`}
viewTransition viewTransition
state={{ 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"> <div className="flex flex-col justify-start items-start w-full max-w-full">
{/* Show skeleton loader during initial load */} {/* Show skeleton loader during initial load */}
{isRequesting && sortedMemoList.length === 0 ? ( {isRequesting && sortedMemoList.length === 0 ? (
<> <div className="w-full flex flex-col justify-start items-center">
{showMemoEditor && <MemoEditor className="mb-2" cacheKey="home-memo-editor" />} <MemoSkeleton showCreator={props.showCreator} count={4} />
<MemoSkeleton showCreator={props.showCreator} count={6} /> </div>
</>
) : ( ) : (
<> <>
<MasonryView <MasonryView