farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Permission and User Info components to include loading indicators

Browse Source 
- 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.
This commit is contained in:
Tom Butcher 2026-08-20 13:07:33 +01:00
parent d0d500de40
commit e54106eb6d
2 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Dashboard/Management/PermissionSettings/PermissionSettingsInfo.jsx
View File

@ -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>
)}

25
src/components/Dashboard/Management/Users/UserInfo.jsx
View File

@ -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'