Improve time formatting

web/src/components/bar/TimelineBar.tsx

@@ -2,6 +2,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { GraphDataPoint } from "@/types/graph";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import useSWR from "swr";
+import ActivityIndicator from "../ui/activity-indicator";
 
 type TimelineBarProps = {
   startTime: number;
@@ -20,6 +21,10 @@ export default function TimelineBar({
 }: TimelineBarProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  if (!config) {
+    return <ActivityIndicator />;
+  }
+
   return (
     <div
       className="my-1 p-1 w-full h-18 border rounded cursor-pointer hover:bg-secondary hover:bg-opacity-30"
@@ -165,7 +170,8 @@ export default function TimelineBar({
       )}
       <div className="text-gray-500">
         {formatUnixTimestampToDateTime(startTime, {
-          strftime_fmt: "%a %d %B",
+          strftime_fmt:
+            config.ui.time_format == "24hour" ? "%m/%d %H:%M" : "%m/%d %I:%M%P",
           time_style: "medium",
           date_style: "medium",
         })}

web/src/views/history/DesktopTimelineView.tsx

@@ -181,6 +181,14 @@ export default function DesktopTimelineView({
                       min: new Date(timeline.range.start * 1000),
                       max: new Date(timeline.range.end * 1000),
                       zoomable: false,
+                      format: {
+                        majorLabels: {
+                          minute:
+                            config.ui.time_format == "24hour"
+                              ? "MM/DD HH:mm"
+                              : "MM/DD hh:mma",
+                        },
+                      },
                     }}
                     timechangeHandler={(data) => {
                       controllerRef.current?.scrubToTimestamp(