Refactor Permission and User Info components to include loading indicators

- Updated PermissionSettingsInfo and UserInfo components to wrap Card elements with Spin for loading state visualization.
- Changed titles in InfoCollapse for consistency, renaming 'Permission Settings Matrix' to 'Permissions Matrix'.
- Enhanced user experience by providing visual feedback during data loading.

src/components/Dashboard/Management/PermissionSettings/PermissionSettingsInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
@@ -184,7 +184,7 @@ const PermissionSettingsInfo = () => {
                       />
                     </InfoCollapse>
                     <InfoCollapse
-                      title='Permission Settings Matrix'
+                      title='Permissions Matrix'
                       icon={<PermissionSettingsIcon />}
                       active={collapseState.matrix}
                       onToggle={(expanded) =>
@@ -192,6 +192,7 @@ const PermissionSettingsInfo = () => {
                       }
                       collapseKey='matrix'
                     >
+                      <Spin spinning={loading} indicator={<LoadingOutlined />}>
                         <Card>
                           <ObjectProperty
                             {...getModelProperty(
@@ -203,6 +204,7 @@ const PermissionSettingsInfo = () => {
                             loading={loading}
                           />
                         </Card>
+                      </Spin>
                     </InfoCollapse>
                   </Flex>
                 )}

src/components/Dashboard/Management/Users/UserInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
@@ -198,13 +198,17 @@ const UserInfo = () => {
             </InfoCollapse>
           </ActionHandler>
           <InfoCollapse
-            title='User Permissions'
+            title='Permissions Matrix'
             icon={<PersonIcon />}
             active={collapseState.permissions}
             onToggle={(expanded) =>
               updateCollapseState('permissions', expanded)
             }
             collapseKey='permissions'
+          >
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
             >
               <Card>
                 <ObjectProperty
@@ -214,6 +218,7 @@ const UserInfo = () => {
                   loading={objectFormState.loading}
                 />
               </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='App Passwords'