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

6
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,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>
)}

9
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,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'