From e54106eb6de5d70c93ebf6b309c598d537180f68 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Thu, 20 Aug 2026 13:07:33 +0100
Subject: [PATCH] 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.
---
 .../PermissionSettingsInfo.jsx                | 28 ++++++++++---------
 .../Dashboard/Management/Users/UserInfo.jsx   | 25 ++++++++++-------
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/Dashboard/Management/PermissionSettings/PermissionSettingsInfo.jsx b/src/components/Dashboard/Management/PermissionSettings/PermissionSettingsInfo.jsx
index b77ab91f..4d2201ee 100644
--- a/src/components/Dashboard/Management/PermissionSettings/PermissionSettingsInfo.jsx
+++ b/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,17 +192,19 @@ const PermissionSettingsInfo = () => {
                       }
                       collapseKey='matrix'
                     >
-                      <Card>
-                        <ObjectProperty
-                          {...getModelProperty(
-                            'permissionSettings',
-                            'permissions'
-                          )}
-                          isEditing={isEditing}
-                          objectData={objectData}
-                          loading={loading}
-                        />
-                      </Card>
+                      <Spin spinning={loading} indicator={<LoadingOutlined />}>
+                        <Card>
+                          <ObjectProperty
+                            {...getModelProperty(
+                              'permissionSettings',
+                              'permissions'
+                            )}
+                            isEditing={isEditing}
+                            objectData={objectData}
+                            loading={loading}
+                          />
+                        </Card>
+                      </Spin>
                     </InfoCollapse>
                   </Flex>
                 )}
diff --git a/src/components/Dashboard/Management/Users/UserInfo.jsx b/src/components/Dashboard/Management/Users/UserInfo.jsx
index e718865d..ab627945 100644
--- a/src/components/Dashboard/Management/Users/UserInfo.jsx
+++ b/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,7 +198,7 @@ const UserInfo = () => {
             </InfoCollapse>
           </ActionHandler>
           <InfoCollapse
-            title='User Permissions'
+            title='Permissions Matrix'
             icon={<PersonIcon />}
             active={collapseState.permissions}
             onToggle={(expanded) =>
@@ -206,14 +206,19 @@ const UserInfo = () => {
             }
             collapseKey='permissions'
           >
-            <Card>
-              <ObjectProperty
-                {...getModelProperty('user', 'permissions')}
-                isEditing={objectFormState.isEditing}
-                objectData={objectFormState.objectData}
-                loading={objectFormState.loading}
-              />
-            </Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
+                <ObjectProperty
+                  {...getModelProperty('user', 'permissions')}
+                  isEditing={objectFormState.isEditing}
+                  objectData={objectFormState.objectData}
+                  loading={objectFormState.loading}
+                />
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='App Passwords'