From 4a891f2d6727b60264b9f58bccc4040d4eb22c37 Mon Sep 17 00:00:00 2001
From: Stephen Hu <stephenhu@seismic.com>
Date: Mon, 12 May 2025 17:15:55 +0800
Subject: [PATCH] Fix: InfiniteScroll sometimes can not fetch next page (#7550)

### What problem does this PR solve?

https://github.com/infiniflow/ragflow/issues/7538

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/pages/flow/list/index.tsx | 49 ++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/web/src/pages/flow/list/index.tsx b/web/src/pages/flow/list/index.tsx
index ce478b2a1..0c624e65f 100644
--- a/web/src/pages/flow/list/index.tsx
+++ b/web/src/pages/flow/list/index.tsx
@@ -70,24 +70,39 @@ const FlowList = () => {
       </Flex>
 
       <Spin spinning={loading}>
-        <InfiniteScroll
-          dataLength={nextList?.length ?? 0}
-          next={fetchNextPage}
-          hasMore={hasNextPage}
-          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-          endMessage={!!total && <Divider plain>{t('noMoreData')} 🤐</Divider>}
-          scrollableTarget="scrollableDiv"
+        <div
+          id="scrollableDiv"
+          style={{
+            height: 'calc(100vh - 200px)',
+            overflow: 'auto',
+          }}
         >
-          <Flex gap={'large'} wrap="wrap" className={styles.flowCardContainer}>
-            {nextList.length > 0 ? (
-              nextList.map((item) => {
-                return <FlowCard item={item} key={item.id}></FlowCard>;
-              })
-            ) : (
-              <Empty className={styles.knowledgeEmpty}></Empty>
-            )}
-          </Flex>
-        </InfiniteScroll>
+          <InfiniteScroll
+            dataLength={nextList?.length ?? 0}
+            next={fetchNextPage}
+            hasMore={hasNextPage}
+            loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+            endMessage={
+              !!total && <Divider plain>{t('noMoreData')} 🤐</Divider>
+            }
+            scrollableTarget="scrollableDiv"
+            scrollThreshold="200px"
+          >
+            <Flex
+              gap={'large'}
+              wrap="wrap"
+              className={styles.flowCardContainer}
+            >
+              {nextList.length > 0 ? (
+                nextList.map((item) => {
+                  return <FlowCard item={item} key={item.id}></FlowCard>;
+                })
+              ) : (
+                <Empty className={styles.knowledgeEmpty}></Empty>
+              )}
+            </Flex>
+          </InfiniteScroll>
+        </div>
       </Spin>
       {flowSettingVisible && (
         <AgentTemplateModal