diff --git a/public/apps/access-error-component.tsx b/public/apps/configuration/access-error-component.tsx
similarity index 100%
rename from public/apps/access-error-component.tsx
rename to public/apps/configuration/access-error-component.tsx
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
index fd04dd78e..eb32183d2 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -22,6 +22,8 @@ import {
   EuiForm,
   EuiFormRow,
   EuiHorizontalRule,
+  EuiLoadingContent,
+  EuiPageHeader,
   EuiPanel,
   EuiSpacer,
   EuiSwitch,
@@ -46,7 +48,7 @@ import { ViewSettingGroup } from './view-setting-group';
 import { DocLinks } from '../../constants';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
-import { AccessErrorComponent } from '../../../access-error-component';
+import { AccessErrorComponent } from '../../access-error-component';
 
 interface AuditLoggingProps extends AppDependencies {
   fromType: string;
@@ -55,10 +57,6 @@ interface AuditLoggingProps extends AppDependencies {
 function renderStatusPanel(onSwitchChange: () => void, auditLoggingEnabled: boolean) {
   return (
     <EuiPanel>
-      <EuiTitle>
-        <h3>Audit logging</h3>
-      </EuiTitle>
-      <EuiHorizontalRule margin="m" />
       <EuiForm>
         <EuiDescribedFormGroup title={<h3>Storage location</h3>} className="described-form-group">
           <EuiFormRow className="form-row">
@@ -97,13 +95,11 @@ function renderStatusPanel(onSwitchChange: () => void, auditLoggingEnabled: bool
 
 function renderAccessErrorPanel(loading: boolean, dataSource: DataSourceOption) {
   return (
-    <EuiPanel>
-      <EuiTitle>
-        <h3>Audit logging</h3>
-      </EuiTitle>
-      <EuiHorizontalRule margin="m" />
-      <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
-    </EuiPanel>
+    <AccessErrorComponent
+      loading={loading}
+      dataSourceLabel={dataSource && dataSource.label}
+      message="You do not have permissions to configure audit logging settings"
+    />
   );
 }
 
@@ -201,7 +197,6 @@ export function AuditLogging(props: AuditLoggingProps) {
       <>
         {statusPanel}
         <EuiSpacer />
-
         <EuiPanel data-test-subj="general-settings">
           <EuiFlexGroup>
             <EuiFlexItem>
@@ -262,7 +257,13 @@ export function AuditLogging(props: AuditLoggingProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {content}
+      <EuiPageHeader>
+        <EuiTitle size="l">
+          <h1>Audit Logging</h1>
+        </EuiTitle>
+      </EuiPageHeader>
+      <EuiSpacer />
+      {loading ? <EuiLoadingContent /> : content}
     </div>
   );
 }
diff --git a/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap b/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
index 9fdee791a..e44012a64 100644
--- a/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
+++ b/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
@@ -256,15 +256,17 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPanel>
-    <EuiTitle>
-      <h3>
-        Audit logging
-      </h3>
+  <EuiPageHeader>
+    <EuiTitle
+      size="l"
+    >
+      <h1>
+        Audit Logging
+      </h1>
     </EuiTitle>
-    <EuiHorizontalRule
-      margin="m"
-    />
+  </EuiPageHeader>
+  <EuiSpacer />
+  <EuiPanel>
     <EuiForm>
       <EuiDescribedFormGroup
         className="described-form-group"
@@ -644,3 +646,39 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
   </EuiPanel>
 </div>
 `;
+
+exports[`Audit logs should load access error component 1`] = `
+<div
+  className="panel-restrict-width"
+>
+  <Memo()
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    dataSourcePickerReadOnly={false}
+    navigation={Object {}}
+    selectedDataSource={
+      Object {
+        "id": "test",
+      }
+    }
+    setDataSource={[MockFunction]}
+  />
+  <EuiPageHeader>
+    <EuiTitle
+      size="l"
+    >
+      <h1>
+        Audit Logging
+      </h1>
+    </EuiTitle>
+  </EuiPageHeader>
+  <EuiSpacer />
+  <AccessErrorComponent
+    loading={false}
+    message="You do not have permissions to configure audit logging settings"
+  />
+</div>
+`;
diff --git a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
index 0a560bbd3..dfe2ab3f4 100644
--- a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
+++ b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
@@ -187,4 +187,17 @@ describe('Audit logs', () => {
       buildHashUrl(ResourceType.auditLogging) + SUB_URL_FOR_COMPLIANCE_SETTINGS_EDIT
     );
   });
+
+  it('should load access error component', () => {
+    const auditLoggingSettings = { enabled: true };
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [auditLoggingSettings, setState])
+      .mockImplementationOnce(() => [false, jest.fn()])
+      .mockImplementationOnce(() => [true, jest.fn()]);
+    const component = shallow(
+      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+    );
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index ba1e9aa72..a34a0d67a 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -13,8 +13,8 @@
  *   permissions and limitations under the License.
  */
 
-import React, { useContext, useState } from 'react';
-import { EuiPageHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
+import React, { useContext } from 'react';
+import { EuiLoadingContent, EuiPageHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import { AuthenticationSequencePanel } from './authentication-sequence-panel';
 import { AuthorizationPanel } from './authorization-panel';
@@ -25,12 +25,12 @@ import { getSecurityConfig } from '../../utils/auth-view-utils';
 import { InstructionView } from './instruction-view';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
-import { AccessErrorComponent } from '../../../access-error-component';
+import { AccessErrorComponent } from '../../access-error-component';
 
 export function AuthView(props: AppDependencies) {
   const [authentication, setAuthentication] = React.useState([]);
   const [authorization, setAuthorization] = React.useState([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = React.useState(false);
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
   const [errorFlag, setErrorFlag] = React.useState(false);
   const [accessErrorFlag, setAccessErrorFlag] = React.useState(false);
@@ -59,7 +59,7 @@ export function AuthView(props: AppDependencies) {
     fetchData();
   }, [props.coreStart.http, dataSource]);
 
-  if (isEmpty(authentication)) {
+  if (isEmpty(authentication) && !loading) {
     return (
       <>
         <SecurityPluginTopNavMenu
@@ -97,14 +97,16 @@ export function AuthView(props: AppDependencies) {
         <EuiTitle size="l">
           <h1>Authentication and authorization</h1>
         </EuiTitle>
-        {!errorFlag && props.config.ui.backend_configurable && (
+        {!loading && !errorFlag && props.config.ui.backend_configurable && (
           <ExternalLinkButton
             href={DocLinks.BackendConfigurationDoc}
             text="Manage via config.yml"
           />
         )}
       </EuiPageHeader>
-      {accessErrorFlag ? (
+      {loading ? (
+        <EuiLoadingContent />
+      ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <>
diff --git a/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
new file mode 100644
index 000000000..aff22a5fb
--- /dev/null
+++ b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Auth view should load access error component 1`] = `
+<Fragment>
+  <Memo()
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    dataSourcePickerReadOnly={false}
+    navigation={Object {}}
+    selectedDataSource={
+      Object {
+        "id": "test",
+      }
+    }
+    setDataSource={[MockFunction]}
+  />
+  <EuiTitle
+    size="l"
+  >
+    <h1>
+      Authentication and authorization
+    </h1>
+  </EuiTitle>
+  <AccessErrorComponent
+    loading={false}
+  />
+</Fragment>
+`;
diff --git a/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx b/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
index b26640131..5643f86fa 100644
--- a/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
+++ b/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
@@ -29,38 +29,37 @@ describe('Auth view', () => {
   const mockCoreStart = {
     http: 1,
   };
+  const config = {
+    authc: {
+      basic_internal_auth_domain: {
+        authentication_backend: {
+          type: 'intern',
+          config: {},
+        },
+      },
+    },
+    authz: {
+      ldap: {
+        http_enabled: true,
+      },
+    },
+  };
 
   const setState = jest.fn();
 
   beforeEach(() => {
-    // jest.spyOn(React, 'useState').mockImplementation((initialValue) => [initialValue, setState]);
     jest.spyOn(React, 'useState').mockRestore();
     jest
       .spyOn(React, 'useState')
       .mockImplementationOnce(() => [[], setState])
       .mockImplementationOnce(() => [[], setState])
       .mockImplementationOnce(() => [false, jest.fn()])
+      .mockImplementationOnce(() => [false, jest.fn()])
       .mockImplementationOnce(() => [false, jest.fn()]);
     jest.spyOn(React, 'useEffect').mockImplementationOnce((f) => f());
   });
 
   it('valid data', (done) => {
-    const config = {
-      authc: {
-        basic_internal_auth_domain: {
-          authentication_backend: {
-            type: 'intern',
-            config: {},
-          },
-        },
-      },
-      authz: {
-        ldap: {
-          http_enabled: true,
-        },
-      },
-    };
-
     mockAuthViewUtils.getSecurityConfig = jest.fn().mockReturnValue(config);
 
     shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
@@ -92,4 +91,20 @@ describe('Auth view', () => {
       done();
     });
   });
+
+  it('should load access error component', async () => {
+    jest.spyOn(React, 'useState').mockRestore();
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [[], setState])
+      .mockImplementationOnce(() => [[], setState])
+      .mockImplementationOnce(() => [false, jest.fn()])
+      .mockImplementationOnce(() => [false, jest.fn()])
+      .mockImplementationOnce(() => [true, jest.fn()]);
+    mockAuthViewUtils.getSecurityConfig = jest
+      .fn()
+      .mockRejectedValue({ response: { status: 403 } });
+    const component = shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index e753b1379..9925ab69d 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -32,6 +32,7 @@ import {
   RIGHT_ALIGNMENT,
   EuiButtonEmpty,
   Query,
+  EuiLoadingContent,
 } from '@elastic/eui';
 import { difference } from 'lodash';
 import React, {
@@ -63,7 +64,7 @@ import { generateResourceName } from '../../utils/resource-utils';
 import { DocLinks } from '../../constants';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
-import { AccessErrorComponent } from '../../../access-error-component';
+import { AccessErrorComponent } from '../../access-error-component';
 
 export function renderBooleanToCheckMark(value: boolean): React.ReactNode {
   return value ? <EuiIcon type="check" /> : '';
@@ -367,7 +368,9 @@ export function PermissionList(props: AppDependencies) {
           <h1>Permissions</h1>
         </EuiTitle>
       </EuiPageHeader>
-      {accessErrorFlag ? (
+      {loading ? (
+        <EuiLoadingContent />
+      ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index f0a8b0f19..00f5fd6e8 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -30,6 +30,7 @@ import {
   EuiButtonEmpty,
   EuiSearchBarProps,
   Query,
+  EuiLoadingContent,
 } from '@elastic/eui';
 import { difference } from 'lodash';
 import { AppDependencies } from '../../types';
@@ -56,7 +57,7 @@ import { useContextMenuState } from '../utils/context-menu';
 import { DocLinks } from '../constants';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
-import { AccessErrorComponent } from '../../access-error-component';
+import { AccessErrorComponent } from '../access-error-component';
 
 const columns: Array<EuiBasicTableColumn<RoleListing>> = [
   {
@@ -271,7 +272,9 @@ export function RoleList(props: AppDependencies) {
           <h1>Roles</h1>
         </EuiTitle>
       </EuiPageHeader>
-      {accessErrorFlag ? (
+      {loading ? (
+        <EuiLoadingContent />
+      ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
diff --git a/public/apps/configuration/panels/service-account-list.tsx b/public/apps/configuration/panels/service-account-list.tsx
index dc66b7a43..ee5745635 100644
--- a/public/apps/configuration/panels/service-account-list.tsx
+++ b/public/apps/configuration/panels/service-account-list.tsx
@@ -20,6 +20,7 @@ import {
   EuiFlexItem,
   EuiInMemoryTable,
   EuiLink,
+  EuiLoadingContent,
   EuiPageBody,
   EuiPageContent,
   EuiPageContentHeader,
@@ -44,7 +45,7 @@ import { showTableStatusMessage } from '../utils/loading-spinner-utils';
 import { buildHashUrl } from '../utils/url-builder';
 import { LocalCluster } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
-import { AccessErrorComponent } from '../../access-error-component';
+import { AccessErrorComponent } from '../access-error-component';
 
 export function dictView(items: Dictionary<string>) {
   if (isEmpty(items)) {
@@ -183,7 +184,9 @@ export function ServiceAccountList(props: AppDependencies) {
           <h1>Service accounts</h1>
         </EuiTitle>
       </EuiPageHeader>
-      {accessErrorFlag ? (
+      {loading ? (
+        <EuiLoadingContent />
+      ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={LocalCluster.label} />
       ) : (
         <EuiPageContent>
diff --git a/public/apps/configuration/panels/tenant-list/configure_tab1.tsx b/public/apps/configuration/panels/tenant-list/configure_tab1.tsx
index f7bf23b1a..2eeef783b 100644
--- a/public/apps/configuration/panels/tenant-list/configure_tab1.tsx
+++ b/public/apps/configuration/panels/tenant-list/configure_tab1.tsx
@@ -32,6 +32,7 @@ import {
   EuiBottomBar,
   EuiComboBox,
   EuiIcon,
+  EuiLoadingContent,
 } from '@elastic/eui';
 import React, { ReactNode, useState } from 'react';
 import { SaveChangesModalGenerator } from './save_changes_modal';
@@ -50,7 +51,7 @@ import {
 } from '../../utils/toast-utils';
 import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';
 import { LOCAL_CLUSTER_ID } from '../../../../../common';
-import { AccessErrorComponent } from '../../../access-error-component';
+import { AccessErrorComponent } from '../../access-error-component';
 import { LocalCluster } from '../../app-router';
 
 export function ConfigureTab1(props: AppDependencies) {
@@ -79,6 +80,7 @@ export function ConfigureTab1(props: AppDependencies) {
   const [toasts, addToast, removeToast] = useToastState();
   const [selectedComboBoxOptions, setSelectedComboBoxOptions] = useState();
   const [accessErrorFlag, setAccessErrorFlag] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
 
   const discardChangesFunction = async () => {
     await setUpdatedConfiguration(originalConfiguration);
@@ -179,20 +181,23 @@ export function ConfigureTab1(props: AppDependencies) {
   React.useEffect(() => {
     const fetchData = async () => {
       try {
+        setLoading(true);
+        const dashboardsInfo = await getDashboardsInfo(props.coreStart.http);
+        const {
+          multitenancy_enabled: multitenancyEnabled = false,
+          private_tenant_enabled: privateTenantEnabled = false,
+          default_tenant: defaultTenant = '',
+        } = dashboardsInfo;
         await setOriginalConfiguration({
-          multitenancy_enabled: (await getDashboardsInfo(props.coreStart.http))
-            .multitenancy_enabled,
-          private_tenant_enabled: (await getDashboardsInfo(props.coreStart.http))
-            .private_tenant_enabled,
-          default_tenant: (await getDashboardsInfo(props.coreStart.http)).default_tenant,
+          multitenancy_enabled: multitenancyEnabled,
+          private_tenant_enabled: privateTenantEnabled,
+          default_tenant: defaultTenant,
         });
 
         await setUpdatedConfiguration({
-          multitenancy_enabled: (await getDashboardsInfo(props.coreStart.http))
-            .multitenancy_enabled,
-          private_tenant_enabled: (await getDashboardsInfo(props.coreStart.http))
-            .private_tenant_enabled,
-          default_tenant: (await getDashboardsInfo(props.coreStart.http)).default_tenant,
+          multitenancy_enabled: multitenancyEnabled,
+          private_tenant_enabled: privateTenantEnabled,
+          default_tenant: defaultTenant,
         });
 
         const rawTenantData = await fetchTenants(props.coreStart.http, LOCAL_CLUSTER_ID);
@@ -205,6 +210,8 @@ export function ConfigureTab1(props: AppDependencies) {
         if (e.response && e.response.status === 403) {
           setAccessErrorFlag(true);
         }
+      } finally {
+        setLoading(false);
       }
     };
     fetchData();
@@ -314,6 +321,9 @@ export function ConfigureTab1(props: AppDependencies) {
     </EuiText>
   );
 
+  if (loading) {
+    return <EuiLoadingContent />;
+  }
   if (accessErrorFlag) {
     return (
       <AccessErrorComponent
diff --git a/public/apps/configuration/panels/tenant-list/manage_tab.tsx b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
index 5bc6e3043..b666802cc 100644
--- a/public/apps/configuration/panels/tenant-list/manage_tab.tsx
+++ b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
@@ -34,6 +34,7 @@ import {
   EuiIcon,
   EuiConfirmModal,
   EuiCallOut,
+  EuiLoadingContent,
 } from '@elastic/eui';
 import React, { ReactNode, useState, useCallback } from 'react';
 import { difference } from 'lodash';
@@ -72,7 +73,7 @@ import { LocalCluster, getBreadcrumbs } from '../../app-router';
 import { buildUrl } from '../../utils/url-builder';
 import { CrossPageToast } from '../../cross-page-toast';
 import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';
-import { AccessErrorComponent } from '../../../access-error-component';
+import { AccessErrorComponent } from '../../access-error-component';
 
 export function ManageTab(props: AppDependencies) {
   const setGlobalBreadcrumbs = flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs);
@@ -489,6 +490,9 @@ export function ManageTab(props: AppDependencies) {
     );
   };
 
+  if (loading) {
+    return <EuiLoadingContent />;
+  }
   if (accessErrorFlag) {
     return (
       <AccessErrorComponent
diff --git a/public/apps/configuration/panels/tenant-list/test/__snapshots__/tenant-list.test.tsx.snap b/public/apps/configuration/panels/tenant-list/test/__snapshots__/tenant-list.test.tsx.snap
index 47f814978..3f40c1b34 100644
--- a/public/apps/configuration/panels/tenant-list/test/__snapshots__/tenant-list.test.tsx.snap
+++ b/public/apps/configuration/panels/tenant-list/test/__snapshots__/tenant-list.test.tsx.snap
@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tenant list AccessError component should load access error component: configure tab 1`] = `
+<AccessErrorComponent
+  dataSourceLabel="Local cluster"
+  message="You do not have permissions to configure tenancy"
+/>
+`;
+
+exports[`Tenant list AccessError component should load access error component: manage tab 1`] = `
+<AccessErrorComponent
+  dataSourceLabel="Local cluster"
+  message="You do not have permissions to manage tenants"
+/>
+`;
+
 exports[`Tenant list Action menu click Duplicate click 1`] = `
 <Fragment>
   <EuiPageHeader />
diff --git a/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx b/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx
index 5e7a63fd4..ca4081fce 100644
--- a/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx
+++ b/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx
@@ -21,6 +21,7 @@ import { useDeleteConfirmState } from '../../../utils/delete-confirm-modal-utils
 import { Tenant } from '../../../types';
 import { TenantEditModal } from '../edit-modal';
 import { getDashboardsInfo } from '../../../../../utils/dashboards-info-utils';
+import { ConfigureTab1 } from '../configure_tab1';
 
 jest.mock('../../../utils/tenant-utils');
 jest.mock('../../../../../utils/auth-info-utils');
@@ -457,4 +458,50 @@ describe('Tenant list', () => {
       expect(mockTenantUtils.selectTenant).toHaveBeenCalled();
     });
   });
+
+  describe('AccessError component', () => {
+    let component;
+    beforeEach(() => {
+      jest.spyOn(React, 'useState').mockRestore();
+      jest
+        .spyOn(React, 'useState')
+        .mockImplementationOnce(() => [[], jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => [true, jest.fn()])
+        .mockImplementationOnce(() => [[], jest.fn()])
+        .mockImplementationOnce(() => ['', jest.fn()])
+        .mockImplementationOnce(() => ['', jest.fn()])
+        .mockImplementationOnce(() => [null, jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => [null, jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => ['', jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()]);
+    });
+
+    it('should load access error component: manage tab', () => {
+      component = shallow(
+        <ManageTab
+          coreStart={mockCoreStart as any}
+          depsStart={{} as any}
+          params={{} as any}
+          config={config as any}
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    it('should load access error component: configure tab', () => {
+      component = shallow(
+        <ConfigureTab1
+          coreStart={mockCoreStart as any}
+          depsStart={{} as any}
+          params={{} as any}
+          config={config as any}
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+  });
 });
diff --git a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
index 346ab0454..4e4035617 100644
--- a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
@@ -1,5 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Role list AccessError component should load access error component 1`] = `
+<Fragment>
+  <Memo()
+    config={Object {}}
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    dataSourcePickerReadOnly={false}
+    navigation={Object {}}
+    params={Object {}}
+    selectedDataSource={
+      Object {
+        "id": "test",
+      }
+    }
+    setDataSource={[MockFunction]}
+  />
+  <EuiPageHeader>
+    <EuiTitle
+      size="l"
+    >
+      <h1>
+        Roles
+      </h1>
+    </EuiTitle>
+  </EuiPageHeader>
+  <EuiPageContent>
+    <EuiPageContentHeader
+      id="role-table-container"
+    >
+      <EuiPageContentHeaderSection>
+        <EuiTitle
+          size="s"
+        >
+          <h3>
+            Roles
+            <span
+              className="panel-header-count"
+            >
+               
+              (
+              0
+              )
+            </span>
+          </h3>
+        </EuiTitle>
+        <EuiText
+          color="subdued"
+          size="xs"
+        >
+          Roles are the core way of controlling access to your cluster. Roles contain any combination of cluster-wide permission, index-specific permissions, document- and field-level security, and tenants. Then you map users to these roles so that users gain those permissions. 
+          <mockConstructor
+            href="https://opensearch.org/docs/latest/security-plugin/access-control/users-roles/"
+          />
+        </EuiText>
+      </EuiPageContentHeaderSection>
+      <EuiPageContentHeaderSection>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiButtonEmpty
+              data-test-subj="edit"
+              disabled={true}
+              key="edit"
+              onClick={[Function]}
+            >
+              Edit
+            </EuiButtonEmpty>
+            <EuiButtonEmpty
+              data-test-subj="duplicate"
+              disabled={true}
+              key="duplicate"
+              onClick={[Function]}
+            >
+              Duplicate
+            </EuiButtonEmpty>
+            <EuiButtonEmpty
+              color="danger"
+              disabled={true}
+              key="delete"
+              onClick={[MockFunction]}
+            >
+              Delete
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiButton
+              data-test-subj="create-role"
+              fill={true}
+              href="#/roles/create"
+            >
+              Create role
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageContentHeaderSection>
+    </EuiPageContentHeader>
+    <EuiPageBody>
+      <EuiInMemoryTable
+        columns={
+          Array [
+            Object {
+              "field": "roleName",
+              "name": "Role",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "field": "clusterPermissions",
+              "name": "Cluster permissions",
+              "render": [Function],
+              "truncateText": true,
+            },
+            Object {
+              "field": "indexPermissions",
+              "name": "Index",
+              "render": [Function],
+              "truncateText": true,
+            },
+            Object {
+              "field": "internalUsers",
+              "name": "Internal users",
+              "render": [Function],
+            },
+            Object {
+              "field": "backendRoles",
+              "name": "Backend roles",
+              "render": [Function],
+            },
+            Object {
+              "field": "tenantPermissions",
+              "name": "Tenants",
+              "render": [Function],
+            },
+            Object {
+              "field": "reserved",
+              "name": "Customization",
+              "render": [Function],
+            },
+          ]
+        }
+        data-test-subj="role-list"
+        error=""
+        itemId="roleName"
+        items={Array []}
+        loading={false}
+        message="No items found"
+        pagination={true}
+        responsive={true}
+        search={Object {}}
+        selection={
+          Object {
+            "onSelectionChange": [MockFunction],
+          }
+        }
+        sorting={true}
+        tableLayout="auto"
+      />
+    </EuiPageBody>
+  </EuiPageContent>
+</Fragment>
+`;
+
 exports[`Role list Render columns render Customization column 1`] = `
 <EuiFlexGroup
   alignItems="center"
diff --git a/public/apps/configuration/panels/test/__snapshots__/service-account-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/service-account-list.test.tsx.snap
new file mode 100644
index 000000000..0617b7a8b
--- /dev/null
+++ b/public/apps/configuration/panels/test/__snapshots__/service-account-list.test.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service Account list AccessError component should load access error component 1`] = `
+<Fragment>
+  <Memo()
+    config={Object {}}
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    dataSourcePickerReadOnly={true}
+    navigation={Object {}}
+    params={Object {}}
+    selectedDataSource={
+      Object {
+        "id": "",
+        "label": "Local cluster",
+      }
+    }
+    setDataSource={[Function]}
+  />
+  <EuiPageHeader>
+    <EuiTitle
+      size="l"
+    >
+      <h1>
+        Service accounts
+      </h1>
+    </EuiTitle>
+  </EuiPageHeader>
+  <AccessErrorComponent
+    dataSourceLabel="Local cluster"
+    loading={false}
+  />
+</Fragment>
+`;
diff --git a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
new file mode 100644
index 000000000..82f4af425
--- /dev/null
+++ b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`User list AccessError component should load access error component 1`] = `
+<Fragment>
+  <Memo()
+    config={Object {}}
+    coreStart={
+      Object {
+        "http": Object {
+          "basePath": Object {
+            "serverBasePath": "",
+          },
+        },
+      }
+    }
+    dataSourcePickerReadOnly={false}
+    navigation={Object {}}
+    params={Object {}}
+    selectedDataSource={
+      Object {
+        "id": "test",
+      }
+    }
+    setDataSource={[MockFunction]}
+  />
+  <EuiPageHeader>
+    <EuiTitle
+      size="l"
+    >
+      <h1>
+        Internal users
+      </h1>
+    </EuiTitle>
+  </EuiPageHeader>
+  <AccessErrorComponent
+    loading={false}
+  />
+</Fragment>
+`;
diff --git a/public/apps/configuration/panels/test/role-list.test.tsx b/public/apps/configuration/panels/test/role-list.test.tsx
index 61211d052..c5f693633 100644
--- a/public/apps/configuration/panels/test/role-list.test.tsx
+++ b/public/apps/configuration/panels/test/role-list.test.tsx
@@ -270,4 +270,30 @@ describe('Role list', () => {
       expect(result).toMatchSnapshot();
     });
   });
+
+  describe('AccessError component', () => {
+    let component;
+    beforeEach(() => {
+      jest.spyOn(React, 'useState').mockRestore();
+      jest
+        .spyOn(React, 'useState')
+        .mockImplementationOnce(() => [[], jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => [[], jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => [true, jest.fn()]);
+      component = shallow(
+        <RoleList
+          coreStart={mockCoreStart as any}
+          navigation={{} as any}
+          params={{} as any}
+          config={{} as any}
+        />
+      );
+    });
+
+    it('should load access error component', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
 });
diff --git a/public/apps/configuration/panels/test/service-account-list.test.tsx b/public/apps/configuration/panels/test/service-account-list.test.tsx
index 54595d235..45417ad53 100644
--- a/public/apps/configuration/panels/test/service-account-list.test.tsx
+++ b/public/apps/configuration/panels/test/service-account-list.test.tsx
@@ -179,4 +179,35 @@ describe('Service Account list', () => {
       );
     });
   });
+
+  describe('AccessError component', () => {
+    let component;
+    const mockCoreStart = {
+      http: 1,
+    };
+    beforeEach(() => {
+      jest.spyOn(React, 'useState').mockRestore();
+      jest
+        .spyOn(React, 'useState')
+        .mockImplementationOnce(() => [[], jest.fn()])
+        .mockImplementationOnce(() => [[], jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => [true, jest.fn()])
+        .mockImplementationOnce(() => ['', jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => [null, jest.fn()]);
+    });
+
+    it('should load access error component', () => {
+      component = shallow(
+        <ServiceAccountList
+          coreStart={mockCoreStart as any}
+          navigation={{} as any}
+          params={{} as any}
+          config={{} as any}
+        />
+      );
+      expect(component).toMatchSnapshot();
+    });
+  });
 });
diff --git a/public/apps/configuration/panels/test/user-list.test.tsx b/public/apps/configuration/panels/test/user-list.test.tsx
index 59003f7e6..980e8d21c 100644
--- a/public/apps/configuration/panels/test/user-list.test.tsx
+++ b/public/apps/configuration/panels/test/user-list.test.tsx
@@ -236,4 +236,39 @@ describe('User list', () => {
       );
     });
   });
+
+  describe('AccessError component', () => {
+    const mockCoreStart = {
+      http: {
+        basePath: {
+          serverBasePath: '',
+        },
+      },
+    };
+    let component;
+    beforeEach(() => {
+      jest.spyOn(React, 'useState').mockRestore();
+      jest
+        .spyOn(React, 'useState')
+        .mockImplementationOnce(() => [[], jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => [[true], jest.fn()])
+        .mockImplementationOnce(() => [[], jest.fn()])
+        .mockImplementationOnce(() => ['', jest.fn()])
+        .mockImplementationOnce(() => [false, jest.fn()])
+        .mockImplementationOnce(() => [null, jest.fn()]);
+      component = shallow(
+        <UserList
+          coreStart={mockCoreStart as any}
+          navigation={{} as any}
+          params={{} as any}
+          config={{} as any}
+        />
+      );
+    });
+
+    it('should load access error component', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
 });
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index 8a388611c..550c2e07e 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -21,6 +21,7 @@ import {
   EuiFlexItem,
   EuiInMemoryTable,
   EuiLink,
+  EuiLoadingContent,
   EuiPageBody,
   EuiPageContent,
   EuiPageContentHeader,
@@ -50,7 +51,7 @@ import { showTableStatusMessage } from '../utils/loading-spinner-utils';
 import { buildHashUrl } from '../utils/url-builder';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
-import { AccessErrorComponent } from '../../access-error-component';
+import { AccessErrorComponent } from '../access-error-component';
 
 export function dictView(items: Dictionary<string>) {
   if (isEmpty(items)) {
@@ -219,7 +220,9 @@ export function UserList(props: AppDependencies) {
           <h1>Internal users</h1>
         </EuiTitle>
       </EuiPageHeader>
-      {accessErrorFlag ? (
+      {loading ? (
+        <EuiLoadingContent />
+      ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
diff --git a/public/apps/configuration/test/__snapshots__/access-error-component.test.tsx.snap b/public/apps/configuration/test/__snapshots__/access-error-component.test.tsx.snap
new file mode 100644
index 000000000..48012118e
--- /dev/null
+++ b/public/apps/configuration/test/__snapshots__/access-error-component.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccessErrorComponent should display custom message prefix once loading is complete 1`] = `
+<EuiPageContent>
+  Custom message prefix for Test-cluster.
+</EuiPageContent>
+`;
+
+exports[`AccessErrorComponent should display default message prefix once loading is complete 1`] = `
+<EuiPageContent>
+  You do not have permissions to view this data for Test-cluster.
+</EuiPageContent>
+`;
+
+exports[`AccessErrorComponent should render loading when loading the content 1`] = `<EuiLoadingContent />`;
diff --git a/public/apps/configuration/test/access-error-component.test.tsx b/public/apps/configuration/test/access-error-component.test.tsx
new file mode 100644
index 000000000..20572ce60
--- /dev/null
+++ b/public/apps/configuration/test/access-error-component.test.tsx
@@ -0,0 +1,48 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import { AccessErrorComponent } from '../access-error-component';
+
+describe('AccessErrorComponent', () => {
+  it('should render loading when loading the content', () => {
+    const props = {
+      dataSourceLabel: 'Test-cluster',
+      loading: true,
+    };
+    const component = shallow(<AccessErrorComponent {...props} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should display default message prefix once loading is complete', () => {
+    const props = {
+      loading: false,
+      dataSourceLabel: 'Test-cluster',
+    };
+    const component = shallow(<AccessErrorComponent {...props} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should display custom message prefix once loading is complete', () => {
+    const props = {
+      loading: false,
+      dataSourceLabel: 'Test-cluster',
+      message: 'Custom message prefix',
+    };
+    const component = shallow(<AccessErrorComponent {...props} />);
+    expect(component).toMatchSnapshot();
+  });
+});