[SECURITY] Fix Users grid loading state if there are no users found (#118886) (#118971)

* fix loading issue on the table without user

* fix check

* review

Co-authored-by: Xavier Mouligneau <xavier.mouligneau@elastic.co>

x-pack/plugins/security/public/management/users/users_grid/users_grid_page.test.tsx

@@ -73,6 +73,66 @@ describe('UsersGridPage', () => {
     expect(findTestSubject(wrapper, 'userDisabled')).toHaveLength(0);
   });
 
+  it('renders the loading indication on the table when fetching user with data', async () => {
+    const apiClientMock = userAPIClientMock.create();
+    apiClientMock.getUsers.mockImplementation(() => {
+      return Promise.resolve<User[]>([
+        {
+          username: 'foo',
+          email: 'foo@bar.net',
+          full_name: 'foo bar',
+          roles: ['kibana_user'],
+          enabled: true,
+        },
+        {
+          username: 'reserved',
+          email: 'reserved@bar.net',
+          full_name: '',
+          roles: ['superuser'],
+          enabled: true,
+          metadata: {
+            _reserved: true,
+          },
+        },
+      ]);
+    });
+
+    const wrapper = mountWithIntl(
+      <UsersGridPage
+        userAPIClient={apiClientMock}
+        rolesAPIClient={rolesAPIClientMock.create()}
+        notifications={coreStart.notifications}
+        history={history}
+        navigateToApp={coreStart.application.navigateToApp}
+      />
+    );
+
+    expect(wrapper.find('.euiBasicTable-loading').exists()).toBeTruthy();
+    await waitForRender(wrapper);
+    expect(wrapper.find('.euiBasicTable-loading').exists()).toBeFalsy();
+  });
+
+  it('renders the loading indication on the table when fetching user with no data', async () => {
+    const apiClientMock = userAPIClientMock.create();
+    apiClientMock.getUsers.mockImplementation(() => {
+      return Promise.resolve<User[]>([]);
+    });
+
+    const wrapper = mountWithIntl(
+      <UsersGridPage
+        userAPIClient={apiClientMock}
+        rolesAPIClient={rolesAPIClientMock.create()}
+        notifications={coreStart.notifications}
+        history={history}
+        navigateToApp={coreStart.application.navigateToApp}
+      />
+    );
+
+    expect(wrapper.find('.euiBasicTable-loading').exists()).toBeTruthy();
+    await waitForRender(wrapper);
+    expect(wrapper.find('.euiBasicTable-loading').exists()).toBeFalsy();
+  });
+
   it('generates valid links when usernames contain special characters', async () => {
     const apiClientMock = userAPIClientMock.create();
     apiClientMock.getUsers.mockImplementation(() => {

x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx

@@ -51,6 +51,7 @@ interface State {
   permissionDenied: boolean;
   filter: string;
   includeReservedUsers: boolean;
+  isTableLoading: boolean;
 }
 
 export class UsersGridPage extends Component<Props, State> {
@@ -65,6 +66,7 @@ export class UsersGridPage extends Component<Props, State> {
       permissionDenied: false,
       filter: '',
       includeReservedUsers: true,
+      isTableLoading: false,
     };
   }
 
@@ -73,7 +75,7 @@ export class UsersGridPage extends Component<Props, State> {
   }
 
   public render() {
-    const { users, roles, permissionDenied, showDeleteConfirmation, selection } = this.state;
+    const { roles, permissionDenied, showDeleteConfirmation, selection } = this.state;
 
     if (permissionDenied) {
       return (
@@ -268,7 +270,7 @@ export class UsersGridPage extends Component<Props, State> {
             selection={selectionConfig}
             pagination={pagination}
             items={this.state.visibleUsers}
-            loading={users.length === 0}
+            loading={this.state.isTableLoading}
             search={search}
             sorting={sorting}
             rowProps={rowProps}
@@ -311,11 +313,15 @@ export class UsersGridPage extends Component<Props, State> {
 
   private async loadUsersAndRoles() {
     try {
+      this.setState({
+        isTableLoading: true,
+      });
       const [users, roles] = await Promise.all([
         this.props.userAPIClient.getUsers(),
         this.props.rolesAPIClient.getRoles(),
       ]);
       this.setState({
+        isTableLoading: false,
         users,
         roles,
         visibleUsers: this.getVisibleUsers(
@@ -325,9 +331,8 @@ export class UsersGridPage extends Component<Props, State> {
         ),
       });
     } catch (e) {
-      if (e.body.statusCode === 403) {
-        this.setState({ permissionDenied: true });
-      } else {
+      this.setState({ permissionDenied: e.body.statusCode === 403, isTableLoading: false });
+      if (e.body.statusCode !== 403) {
         this.props.notifications.toasts.addDanger(
           i18n.translate('xpack.security.management.users.fetchingUsersErrorMessage', {
             defaultMessage: 'Error fetching users: {message}',