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 { useRef, useState } from 'react'
import { useLocation } from 'react-router-dom' 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 { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState' import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel' import NotesPanel from '../../common/NotesPanel'
@ -184,7 +184,7 @@ const PermissionSettingsInfo = () => {
/> />
</InfoCollapse> </InfoCollapse>
<InfoCollapse <InfoCollapse
title='Permission Settings Matrix' title='Permissions Matrix'
icon={<PermissionSettingsIcon />} icon={<PermissionSettingsIcon />}
active={collapseState.matrix} active={collapseState.matrix}
onToggle={(expanded) => onToggle={(expanded) =>
@ -192,17 +192,19 @@ const PermissionSettingsInfo = () => {
} }
collapseKey='matrix' collapseKey='matrix'
> >
<Card> <Spin spinning={loading} indicator={<LoadingOutlined />}>
<ObjectProperty <Card>
{...getModelProperty( <ObjectProperty
'permissionSettings', {...getModelProperty(
'permissions' 'permissionSettings',
)} 'permissions'
isEditing={isEditing} )}
objectData={objectData} isEditing={isEditing}
loading={loading} objectData={objectData}
/> loading={loading}
</Card> />
</Card>
</Spin>
</InfoCollapse> </InfoCollapse>
</Flex> </Flex>
)} )}

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

@ -1,6 +1,6 @@
import { useRef, useState } from 'react' import { useRef, useState } from 'react'
import { useLocation } from 'react-router-dom' 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 { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState' import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel' import NotesPanel from '../../common/NotesPanel'
@ -198,7 +198,7 @@ const UserInfo = () => {
</InfoCollapse> </InfoCollapse>
</ActionHandler> </ActionHandler>
<InfoCollapse <InfoCollapse
title='User Permissions' title='Permissions Matrix'
icon={<PersonIcon />} icon={<PersonIcon />}
active={collapseState.permissions} active={collapseState.permissions}
onToggle={(expanded) => onToggle={(expanded) =>
@ -206,14 +206,19 @@ const UserInfo = () => {
} }
collapseKey='permissions' collapseKey='permissions'
> >
<Card> <Spin
<ObjectProperty spinning={objectFormState.loading}
{...getModelProperty('user', 'permissions')} indicator={<LoadingOutlined />}
isEditing={objectFormState.isEditing} >
objectData={objectFormState.objectData} <Card>
loading={objectFormState.loading} <ObjectProperty
/> {...getModelProperty('user', 'permissions')}
</Card> isEditing={objectFormState.isEditing}
objectData={objectFormState.objectData}
loading={objectFormState.loading}
/>
</Card>
</Spin>
</InfoCollapse> </InfoCollapse>
<InfoCollapse <InfoCollapse
title='App Passwords' title='App Passwords'