From ebd91d2148383359ad4c9d62737861d7e9d80235 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Wed, 21 May 2025 23:10:35 +0500
Subject: [PATCH] [Fix]: infinite loading for Developers Group

---
 .../permission/groupUsersPermission.tsx       |  5 +-
 .../setting/permission/orgUsersPermission.tsx |  5 +-
 .../setting/permission/permissionDetail.tsx   | 74 +++++++++++++------
 3 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
index 4ed3e0a3c..189e147ab 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/groupUsersPermission.tsx
@@ -45,11 +45,12 @@ type GroupPermissionProp = {
   currentUser: User;
   setModify?: any;
   modify?: boolean;
+  loading?: boolean;
 };
 
 function GroupUsersPermission(props: GroupPermissionProp) {
   const { Column } = TableStyled;
-  const { group, orgId,  groupUsers, currentUserGroupRole, currentUser , setModify, modify} = props;
+  const { group, orgId, groupUsers, currentUserGroupRole, currentUser, setModify, modify, loading } = props;
   const adminCount = groupUsers.filter((user) => isGroupAdmin(user.role)).length;
   const sortedGroupUsers = useMemo(() => {
     return [...groupUsers].sort((a, b) => {
@@ -97,7 +98,7 @@ function GroupUsersPermission(props: GroupPermissionProp) {
         dataSource={sortedGroupUsers}
         rowKey="userId"
         pagination={false}
-        loading={groupUsers.length === 0}
+        loading={loading}
       >
         <Column
           title={trans("memberSettings.nameColumn")}
diff --git a/client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx b/client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx
index e00d06e66..4e4a189db 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/orgUsersPermission.tsx
@@ -58,11 +58,12 @@ type UsersPermissionProp = {
   currentUser: User;
   setModify?: any;
   modify?: boolean;
+  loading?: boolean;
 };
 
 function OrgUsersPermission(props: UsersPermissionProp) {
   const { Column } = TableStyled;
-  const { orgId, orgUsers, currentUser , setModify, modify} = props;
+  const { orgId, orgUsers, currentUser, setModify, modify, loading } = props;
   const adminCount = orgUsers.filter(
     (user) => user.role === ADMIN_ROLE || user.role === SUPER_ADMIN_ROLE,
   ).length;
@@ -149,7 +150,7 @@ function OrgUsersPermission(props: UsersPermissionProp) {
         dataSource={sortedOrgUsers}
         rowKey="userId"
         pagination={false}
-        loading={orgUsers.length === 0}
+        loading={loading}
       >
         <Column
           title={trans("memberSettings.nameColumn")}
diff --git a/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx b/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx
index d144c4e47..57eb1eb91 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/permissionDetail.tsx
@@ -23,12 +23,14 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
 
   const {currentPageProp, pageSizeProp} = props;
   const user = useSelector(getUser);
-  const [elements, setElements] = useState<any>({ elements: [], total: 1, role: "" });
+  const [elements, setElements] = useState<any>({ elements: [], total: 0, role: "" });
   const [group, setGrouop] = useState<OrgGroup>();
-  const [orgMemberElements, setOrgMemberElements] = useState<any>({ elements: [], total: 1 })
+  const [orgMemberElements, setOrgMemberElements] = useState<any>({ elements: [], total: 0 })
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [modify, setModify] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   const orgId = user.currentOrgId;
   const currentUser = useSelector(getUser);
@@ -51,23 +53,36 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
   )
 
   useEffect( () => {
-    if (selectKey !== "users" && selectKey)
+    if (selectKey !== "users" && selectKey) {
+      setLoading(true);
+      setError(null);
+      
       fetchGroupUsrPagination(
         {
-          groupId:selectKey,
+          groupId: selectKey,
           pageNum: currentPage,
           pageSize: pageSize,
         }
-        ).then(result => {
-          if (result.success){
-            setElements({elements: result.data || [], total: result.total || 1, role: result.visitorRole || ""})
-          }
-          else
-            console.error("ERROR: fetchFolderElements", result.error)
+      ).then(result => {
+        setLoading(false);
+        
+        if (result.success) {
+          setElements({
+            elements: result.data || [], 
+            total: result.total || 0,
+            role: result.visitorRole || ""
+          });
+        } else {
+          setError("Failed to load group users. Please try again.");
         }
-        )
-    else
-    {
+      }).catch(err => {
+        setLoading(false);
+        setError("Failed to load group users. Please try again.");
+      });
+    } else {
+      setLoading(true);
+      setError(null);
+      
       fetchOrgUsrPagination(
         {
           orgId: orgId,
@@ -75,17 +90,22 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
           pageSize: pageSize,
         }
       ).then(result => {
-          if (result.success){
-            setOrgMemberElements({elements: result.data || [], total: result.total || 1})
-          }
-          else
-            console.error("ERROR: fetchFolderElements", result.error)
+        setLoading(false);
+        if (result.success){
+          setOrgMemberElements({
+            elements: result.data || [], 
+            total: result.total || 0
+          });
+        }
+        else {
+          setError("Failed to load organization users. Please try again.");
         }
-      )
+      }).catch(err => {
+        setLoading(false);
+        setError("Failed to load organization users. Please try again.");
+      });
     }
-      },
-      [currentPage, pageSize, modify, selectKey]
-  )
+  }, [currentPage, pageSize, modify, selectKey, orgId]);
 
   if (!orgId) {
     return null;
@@ -93,15 +113,21 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
 
   return (
       <PermissionContent key={selectKey}>
+        {error && (
+          <div style={{ color: 'red', margin: '20px 0', textAlign: 'center' }}>
+            {error}
+          </div>
+        )}
+        
         {selectKey === "users" ? (
             <>
               <UsersPermission
                   orgId={orgId}
-                  // orgUsers={!orgMemberElements.elements.members ? [] : orgMemberElements.elements.members}
                   orgUsers={orgMemberElements.elements}
                   currentUser={currentUser}
                   setModify={setModify}
                   modify={modify}
+                  loading={loading}
               />
               <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={orgMemberElements.total} />
             </>
@@ -116,10 +142,10 @@ export default function PermissionSetting(props: {currentPageProp: number, pageS
                       currentUser={currentUser}
                       setModify={setModify}
                       modify={modify}
+                      loading={loading}
                   />
                   <PaginationComp setCurrentPage={setCurrentPage} setPageSize={setPageSize} currentPage={currentPage} pageSize={pageSize} total={elements.total} />
                 </>
-
             )
         )}
       </PermissionContent>