administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-03 17:55:21 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

System page: add spinner while refreshing

Browse Source
This commit is contained in:
leccelecce 2023-01-28 13:19:10 +00:00
parent 7130d93616
commit 516d0936d4
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/ActivityIndicator.jsx
View File

@ -6,9 +6,9 @@ const sizes = {
lg: 'h-16 w-16 border-8 border-t-8',
};
export default function ActivityIndicator({ size = 'md' }) {
export default function ActivityIndicator({ size = 'md', center = true }) {
return (
<div className="w-full flex items-center justify-center" aria-label="Loading…">
<div className={center ? `w-full flex items-center justify-center` : 'inline-block'} aria-label="Loading…">
<div className={`activityindicator ease-in rounded-full border-gray-200 text-blue-500 ${sizes[size]}`} />
</div>
);

20
web/src/routes/System.jsx
View File

@ -21,7 +21,8 @@ export default function System() {
const {
value: { payload: stats },
} = useWs('stats');
const { data: initialStats } = useSWR('stats');
const { data: initialStats, isValidating } = useSWR('stats');
const {
cpu_usages,
@ -87,7 +88,12 @@ export default function System() {
{service.last_updated && (
<p>
<span>Last refreshed: <TimeAgo time={service.last_updated * 1000} dense /></span>
<span>Last refreshed: </span>
{isValidating ? (
<ActivityIndicator size="sm" center={false} />
) : (
<TimeAgo time={service.last_updated * 1000} dense />
)}
</p>
)}
@ -255,11 +261,15 @@ export default function System() {
{(() => {
if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 1)
return <Td>{cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped)</Td>
return (
<Td>
{cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped)
</Td>
);
else if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 0)
return <Td>disabled</Td>
return <Td>disabled</Td>;
return <Td>- </Td>
return <Td>- </Td>;
})()}
<Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}%</Td>