feat(admin-ui): add loader to user list page

GluuFederation · Jul 18, 2022 · f5f766a · f5f766a
1 parent 5cc85be
commit f5f766a
Showing 1 changed file with 46 additions and 43 deletions.
diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserList.js b/admin-ui/plugins/user-management/components/UserManagement/UserList.js
@@ -24,6 +24,7 @@ import {
 import GluuCommitDialog from '../../../../app/routes/Apps/Gluu/GluuCommitDialog'
 import SetTitle from 'Utils/SetTitle'
 import { getRoles } from '../../../admin/redux/actions/ApiRoleActions'
+import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 
@@ -111,49 +112,51 @@ function UserList(props) {
   }
 
   return (
-    <Card style={applicationStyle.mainCard}>
-      <CardBody>
-        <GluuViewWrapper canShow={hasPermission(permissions, ROLE_READ)}>
-          {usersList.length > 0 && (
-            <MaterialTable
-              components={{
-                Container: (props) => <Paper {...props} elevation={0} />,
-              }}
-              columns={[
-                {
-                  title: `${t('fields.name')}`,
-                  field: 'displayName',
-                },
-                { title: `${t('fields.userName')}`, field: 'userId' },
-                { title: `${t('fields.email')}`, field: 'mail' },
-              ]}
-              data={usersList}
-              isLoading={loading}
-              title=""
-              actions={myActions}
-              options={{
-                search: true,
-                searchFieldAlignment: 'left',
-                selection: false,
-                pageSize: pageSize,
-                rowStyle: (rowData) => ({
-                  backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
-                }),
-                headerStyle: {
-                  ...applicationStyle.tableHeaderStyle,
-                  ...bgThemeColor,
-                },
-                actionsColumnIndex: -1,
-              }}
-              detailPanel={(rowData) => {
-                return <UserDetailViewPage row={rowData} />
-              }}
-            />
-          )}
-        </GluuViewWrapper>
-      </CardBody>
-      <GluuCommitDialog handler={toggle} modal={modal} onAccept={submitForm} />
-    </Card>
+    <GluuLoader blocking={loading}>
+      <Card style={applicationStyle.mainCard}>
+        <CardBody>
+          <GluuViewWrapper canShow={hasPermission(permissions, ROLE_READ)}>
+            {usersList.length > 0 && (
+              <MaterialTable
+                components={{
+                  Container: (props) => <Paper {...props} elevation={0} />,
+                }}
+                columns={[
+                  {
+                    title: `${t('fields.name')}`,
+                    field: 'displayName',
+                  },
+                  { title: `${t('fields.userName')}`, field: 'userId' },
+                  { title: `${t('fields.email')}`, field: 'mail' },
+                ]}
+                data={usersList}
+                isLoading={loading}
+                title=""
+                actions={myActions}
+                options={{
+                  search: true,
+                  searchFieldAlignment: 'left',
+                  selection: false,
+                  pageSize: pageSize,
+                  rowStyle: (rowData) => ({
+                    backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
+                  }),
+                  headerStyle: {
+                    ...applicationStyle.tableHeaderStyle,
+                    ...bgThemeColor,
+                  },
+                  actionsColumnIndex: -1,
+                }}
+                detailPanel={(rowData) => {
+                  return <UserDetailViewPage row={rowData} />
+                }}
+              />
+            )}
+          </GluuViewWrapper>
+        </CardBody>
+        <GluuCommitDialog handler={toggle} modal={modal} onAccept={submitForm} />
+      </Card>
+    </GluuLoader>
   )
 }
 export default UserList