From 8374346b2e37d89e9a2bc5357ec6802f3939c00e Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Wed, 18 Dec 2024 03:40:33 +0000
Subject: [PATCH] feat(core): lazy load doc card (#9192)

---
 .../src/mobile/components/doc-card/index.tsx  | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/core/src/mobile/components/doc-card/index.tsx b/packages/frontend/core/src/mobile/components/doc-card/index.tsx
index c4dcec17f2..333f6a0cc7 100644
--- a/packages/frontend/core/src/mobile/components/doc-card/index.tsx
+++ b/packages/frontend/core/src/mobile/components/doc-card/index.tsx
@@ -102,30 +102,35 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
         data-visible={visible}
         {...attrs}
       >
-        <header className={styles.head} data-testid="doc-card-header">
-          <h3 className={styles.title}>{title}</h3>
-          <IconButton
-            aria-label="favorite"
-            icon={
-              <IsFavoriteIcon onClick={toggleFavorite} favorite={favorited} />
-            }
-          />
-        </header>
-        <main className={styles.content} style={contentStyle}>
-          {visible && (
-            <PagePreview
-              fallback={
-                <>
-                  <Skeleton />
-                  <Skeleton width={'60%'} />
-                </>
-              }
-              pageId={meta.id}
-              emptyFallback={<div className={styles.contentEmpty}>Empty</div>}
-            />
-          )}
-        </main>
-        {showTags ? <DocCardTags docId={meta.id} rows={2} /> : null}
+        {visible && (
+          <>
+            <header className={styles.head} data-testid="doc-card-header">
+              <h3 className={styles.title}>{title}</h3>
+              <IconButton
+                aria-label="favorite"
+                icon={
+                  <IsFavoriteIcon
+                    onClick={toggleFavorite}
+                    favorite={favorited}
+                  />
+                }
+              />
+            </header>
+            <main className={styles.content} style={contentStyle}>
+              <PagePreview
+                fallback={
+                  <>
+                    <Skeleton />
+                    <Skeleton width={'60%'} />
+                  </>
+                }
+                pageId={meta.id}
+                emptyFallback={<div className={styles.contentEmpty}>Empty</div>}
+              />
+            </main>
+            {showTags ? <DocCardTags docId={meta.id} rows={2} /> : null}
+          </>
+        )}
       </WorkbenchLink>
     );
   }