From 516d0936d4ad90752efdff34738edd9999d4ae1e Mon Sep 17 00:00:00 2001
From: leccelecce <24962424+leccelecce@users.noreply.github.com>
Date: Sat, 28 Jan 2023 13:19:10 +0000
Subject: [PATCH] System page: add spinner while refreshing

---
 web/src/components/ActivityIndicator.jsx |  4 ++--
 web/src/routes/System.jsx                | 20 +++++++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/src/components/ActivityIndicator.jsx b/web/src/components/ActivityIndicator.jsx
index 4d08ce506..eefaae148 100644
--- a/web/src/components/ActivityIndicator.jsx
+++ b/web/src/components/ActivityIndicator.jsx
@@ -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>
   );
diff --git a/web/src/routes/System.jsx b/web/src/routes/System.jsx
index e1ff56ed0..4b6b36f4d 100644
--- a/web/src/routes/System.jsx
+++ b/web/src/routes/System.jsx
@@ -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>