feat(core): lazy load doc card (#9192)

packages/frontend/core/src/mobile/components/doc-card/index.tsx

@@ -102,17 +102,21 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
         data-visible={visible}
         {...attrs}
       >
+        {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} />
+                  <IsFavoriteIcon
+                    onClick={toggleFavorite}
+                    favorite={favorited}
+                  />
                 }
               />
             </header>
             <main className={styles.content} style={contentStyle}>
-          {visible && (
               <PagePreview
                 fallback={
                   <>
@@ -123,9 +127,10 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
                 pageId={meta.id}
                 emptyFallback={<div className={styles.contentEmpty}>Empty</div>}
               />
-          )}
             </main>
             {showTags ? <DocCardTags docId={meta.id} rows={2} /> : null}
+          </>
+        )}
       </WorkbenchLink>
     );
   }