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', 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 ( 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 className={`activityindicator ease-in rounded-full border-gray-200 text-blue-500 ${sizes[size]}`} />
</div> </div>
); );

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

@ -21,7 +21,8 @@ export default function System() {
const { const {
value: { payload: stats }, value: { payload: stats },
} = useWs('stats'); } = useWs('stats');
const { data: initialStats } = useSWR('stats');
const { data: initialStats, isValidating } = useSWR('stats');
const { const {
cpu_usages, cpu_usages,
@ -87,7 +88,12 @@ export default function System() {
{service.last_updated && ( {service.last_updated && (
<p> <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> </p>
)} )}
@ -255,11 +261,15 @@ export default function System() {
{(() => { {(() => {
if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 1) 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) 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> <Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}%</Td>