tiptap: get data when visible

packages/client/src/components/document/actions/index.tsx

@@ -55,7 +55,6 @@ export const DocumentActions: React.FC<IProps> = ({
       <Popover
         showArrow
         style={{ padding: 0 }}
-        trigger="click"
         visible={popoverVisible}
         onVisibleChange={wrapOnVisibleChange}
         content={

packages/client/src/components/document/star/index.tsx

@@ -1,7 +1,9 @@
 import { IconStar } from '@douyinfe/semi-icons';
 import { Button, Tooltip } from '@douyinfe/semi-ui';
 import { useDocumentCollectToggle } from 'data/collector';
-import React from 'react';
+import { useToggle } from 'hooks/use-toggle';
+import React, { useCallback } from 'react';
+import VisibilitySensor from 'react-visibility-sensor';
 
 interface IProps {
   documentId: string;
@@ -15,11 +17,21 @@ interface IProps {
 }
 
 export const DocumentStar: React.FC<IProps> = ({ documentId, disabled = false, render }) => {
-  const { data, toggle: toggleStar } = useDocumentCollectToggle(documentId);
+  const [visible, toggleVisible] = useToggle(false);
+  const { data, toggle: toggleStar } = useDocumentCollectToggle(documentId, { enabled: visible });
   const text = data ? '取消收藏' : '收藏文档';
 
+  const onViewportChange = useCallback(
+    (visible) => {
+      if (visible) {
+        toggleVisible(true);
+      }
+    },
+    [toggleVisible]
+  );
+
   return (
-    <>
+    <VisibilitySensor onChange={onViewportChange}>
       {render ? (
         render({ star: data, disabled, toggleStar, text })
       ) : (
@@ -39,6 +51,6 @@ export const DocumentStar: React.FC<IProps> = ({ documentId, disabled = false, r
           />
         </Tooltip>
       )}
-    </>
+    </VisibilitySensor>
   );
 };

packages/client/src/data/collector.ts

@@ -7,7 +7,7 @@ import {
   triggerToggleCollectWiki,
 } from 'event';
 import { useCallback, useEffect } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery, UseQueryOptions } from 'react-query';
 import { HttpClient } from 'services/http-client';
 
 export type IWikiWithIsMember = IWiki & { isMember?: boolean };
@@ -168,9 +168,11 @@ export const toggleCollectDocument = (documentId, cookie = null): Promise<boolea
  * @param documentId
  * @returns
  */
-export const useDocumentCollectToggle = (documentId) => {
-  const { data, error, refetch } = useQuery([CollectorApiDefinition.check.client(), documentId], () =>
-    getDocumentIsCollected(documentId)
+export const useDocumentCollectToggle = (documentId, options?: UseQueryOptions<boolean>) => {
+  const { data, error, refetch } = useQuery(
+    [CollectorApiDefinition.check.client(), documentId],
+    () => getDocumentIsCollected(documentId),
+    options
   );
 
   const toggle = useCallback(async () => {