Use optimistic state and skeletons for loading

frigate/stats/emitter.py

@@ -16,7 +16,8 @@ from frigate.types import StatsTrackingTypes
 logger = logging.getLogger(__name__)
 
 
-MAX_STATS_POINTS = 120
+MAX_STATS_POINTS = 80
+FREQUENCY_STATS_POINTS = 15
 
 
 class StatsEmitter(threading.Thread):
@@ -70,9 +71,9 @@ class StatsEmitter(threading.Thread):
     def run(self) -> None:
         time.sleep(10)
         for counter in itertools.cycle(
-            range(int(self.config.mqtt.stats_interval / 10))
+            range(int(self.config.mqtt.stats_interval / FREQUENCY_STATS_POINTS))
         ):
-            if self.stop_event.wait(10):
+            if self.stop_event.wait(FREQUENCY_STATS_POINTS):
                 break
 
             logger.debug("Starting stats collection")

web/src/components/graph/SystemGraph.tsx

@@ -87,6 +87,9 @@ export function ThresholdBarGraph({
       tooltip: {
         theme: systemTheme || theme,
       },
+      markers: {
+        size: 0,
+      },
       xaxis: {
         tickAmount: 4,
         tickPlacement: "on",
@@ -105,7 +108,7 @@ export function ThresholdBarGraph({
         min: 0,
         max: threshold.warning + 10,
       },
-    };
+    } as ApexCharts.ApexOptions;
   }, [graphId, threshold, systemTheme, theme, formatTime]);
 
   useEffect(() => {

web/src/views/system/GeneralMetrics.tsx

@@ -12,6 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import VainfoDialog from "@/components/overlay/VainfoDialog";
 import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
+import { Skeleton } from "@/components/ui/skeleton";
 
 type GeneralMetricsProps = {
   lastUpdated: number;
@@ -264,10 +265,6 @@ export default function GeneralMetrics({
     return Object.values(series);
   }, [statsHistory]);
 
-  if (statsHistory.length == 0) {
-    return;
-  }
-
   return (
     <>
       <VainfoDialog showVainfo={showVainfo} setShowVainfo={setShowVainfo} />
@@ -276,7 +273,8 @@ export default function GeneralMetrics({
         <div className="text-muted-foreground text-sm font-medium">
           Detectors
         </div>
-        <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+        <div className="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+          {detInferenceTimeSeries.length != 0 ? (
             <div className="p-2.5 bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector Inference Speed</div>
               {detInferenceTimeSeries.map((series) => (
@@ -291,6 +289,10 @@ export default function GeneralMetrics({
                 />
               ))}
             </div>
+          ) : (
+            <Skeleton className="w-full aspect-video" />
+          )}
+          {statsHistory.length != 0 ? (
             <div className="p-2.5 bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector CPU Usage</div>
               {detCpuSeries.map((series) => (
@@ -305,6 +307,10 @@ export default function GeneralMetrics({
                 />
               ))}
             </div>
+          ) : (
+            <Skeleton className="w-full aspect-video" />
+          )}
+          {statsHistory.length != 0 ? (
             <div className="p-2.5 bg-primary rounded-2xl flex-col">
               <div className="mb-5">Detector Memory Usage</div>
               {detMemSeries.map((series) => (
@@ -319,15 +325,19 @@ export default function GeneralMetrics({
                 />
               ))}
             </div>
+          ) : (
+            <Skeleton className="w-full aspect-video" />
+          )}
         </div>
 
-        {statsHistory.length > 0 && statsHistory[0].gpu_usages && (
+        {(statsHistory.length == 0 || statsHistory[0].gpu_usages) && (
           <>
             <div className="mt-4 flex items-center justify-between">
               <div className="text-muted-foreground text-sm font-medium">
                 GPUs
               </div>
-              {Object.keys(statsHistory[0].gpu_usages).filter(
+              {statsHistory.length > 0 &&
+                Object.keys(statsHistory[0].gpu_usages ?? {}).filter(
                   (key) =>
                     key == "amd-vaapi" ||
                     key == "intel-vaapi" ||
@@ -344,6 +354,7 @@ export default function GeneralMetrics({
                 )}
             </div>
             <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
+              {statsHistory.length != 0 ? (
                 <div className="p-2.5 bg-primary rounded-2xl flex-col">
                   <div className="mb-5">GPU Usage</div>
                   {gpuSeries.map((series) => (
@@ -358,6 +369,10 @@ export default function GeneralMetrics({
                     />
                   ))}
                 </div>
+              ) : (
+                <Skeleton className="w-full aspect-video" />
+              )}
+              {statsHistory.length != 0 ? (
                 <div className="p-2.5 bg-primary rounded-2xl flex-col">
                   <div className="mb-5">GPU Memory</div>
                   {gpuMemSeries.map((series) => (
@@ -372,6 +387,9 @@ export default function GeneralMetrics({
                     />
                   ))}
                 </div>
+              ) : (
+                <Skeleton className="w-full aspect-video" />
+              )}
             </div>
           </>
         )}
@@ -380,6 +398,7 @@ export default function GeneralMetrics({
           Other Processes
         </div>
         <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
+          {statsHistory.length != 0 ? (
             <div className="p-2.5 bg-primary rounded-2xl flex-col">
               <div className="mb-5">Process CPU Usage</div>
               {otherProcessCpuSeries.map((series) => (
@@ -394,6 +413,10 @@ export default function GeneralMetrics({
                 />
               ))}
             </div>
+          ) : (
+            <Skeleton className="w-full aspect-tall" />
+          )}
+          {statsHistory.length != 0 ? (
             <div className="p-2.5 bg-primary rounded-2xl flex-col">
               <div className="mb-5">Process Memory Usage</div>
               {otherProcessMemSeries.map((series) => (
@@ -408,6 +431,9 @@ export default function GeneralMetrics({
                 />
               ))}
             </div>
+          ) : (
+            <Skeleton className="w-full aspect-tall" />
+          )}
         </div>
       </div>
     </>