From 1e954070b9590ee5c0633f83f288d53b489a601a Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 30 Oct 2025 22:25:19 +0800
Subject: [PATCH] refactor(web): improve memo component skeleton and loading
 states

---
 web/src/components/MemoSkeleton.tsx                | 2 +-
 web/src/components/MemoView.tsx                    | 5 ++++-
 web/src/components/PagedMemoList/PagedMemoList.tsx | 7 +++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/components/MemoSkeleton.tsx b/web/src/components/MemoSkeleton.tsx
index 59435a6c1..1201e7ed0 100644
--- a/web/src/components/MemoSkeleton.tsx
+++ b/web/src/components/MemoSkeleton.tsx
@@ -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">
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 165863e66..f392df895 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -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={{
diff --git a/web/src/components/PagedMemoList/PagedMemoList.tsx b/web/src/components/PagedMemoList/PagedMemoList.tsx
index 5eb716616..fafa9ed38 100644
--- a/web/src/components/PagedMemoList/PagedMemoList.tsx
+++ b/web/src/components/PagedMemoList/PagedMemoList.tsx
@@ -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