feat: auto load

src/client/page/gallery.tsx

@@ -7,6 +7,7 @@ import { toQueryString } from '../accessor/util';
 
 import { useLocation } from 'react-router-dom';
 import { QueryStringToMap } from '../accessor/util';
+import { useIsElementInViewport } from './reader/reader';
 
 
 
@@ -22,6 +23,14 @@ export const GalleryInfo = (props: GalleryProp) => {
     const [state, setState] = useState<GalleryState>({ documents: undefined });
     const [error, setError] = useState<string | null>(null);
     const [loadAll, setLoadAll] = useState(false);
+    const {elementRef, isVisible: isLoadVisible} = useIsElementInViewport<HTMLButtonElement>({});
+
+    useEffect(()=>{
+        if(isLoadVisible && (!loadAll) && (state.documents != undefined)){
+            loadMore();
+        }
+    },[isLoadVisible]);
+
     useEffect(() => {
         const abortController = new AbortController();
         console.log('load first',props.option);
@@ -71,11 +80,13 @@ export const GalleryInfo = (props: GalleryProp) => {
                     justifyContent: "center",
                     textAlign:"center"
                 }}>{state.documents ? state.documents.length : "null"} loaded...</Typography>
-                <Button onClick={()=>loadMore()} disabled={loadAll}>{loadAll ? "Load All" : "Load More"}</Button>
+                <Button onClick={()=>loadMore()} disabled={loadAll} ref={elementRef} >{loadAll ? "Load All" : "Load More"}</Button>
             </Box>
         );
+    }
     function loadMore() {
         let option = {...props.option};
+        console.log(elementRef)
         if(state.documents === undefined || state.documents.length === 0){
             console.log("loadall");
             setLoadAll(true);
@@ -95,7 +106,6 @@ export const GalleryInfo = (props: GalleryProp) => {
         });
         load();
     }
-    }
 }
 
 export const Gallery = () => {