From cfefdb2fb070b8e0da5c4e36072825eeb0cbe8c1 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 13 Dec 2023 15:46:55 -0700
Subject: [PATCH] Load more efficiently

---
 web-new/src/pages/History.tsx | 26 ++++++++++++++++----------
 web-new/src/utils/dateUtil.ts |  4 ++--
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/web-new/src/pages/History.tsx b/web-new/src/pages/History.tsx
index cdba3dd69..f97072836 100644
--- a/web-new/src/pages/History.tsx
+++ b/web-new/src/pages/History.tsx
@@ -161,7 +161,7 @@ function History() {
     [size, setSize, isValidating, isDone]
   );
 
-  if (!config || !timelineCards) {
+  if (!config || !timelineCards ||timelineCards.length == 0) {
     return <ActivityIndicator />;
   }
 
@@ -186,12 +186,14 @@ function History() {
                 {Object.entries(timelineDay).map(
                   ([hour, timelineHour], hourIdx) => {
                     if (Object.values(timelineHour).length == 0) {
-                      return <></>;
+                      return <div key={hour}></div>;
                     }
 
                     const lastRow =
                       dayIdx == Object.values(timelineCards).length - 1 &&
                       hourIdx == Object.values(timelineDay).length - 1;
+                    const previewMap: { [key: string]: Preview | undefined } =
+                      {};
 
                     return (
                       <div key={hour} ref={lastRow ? lastTimelineRef : null}>
@@ -206,19 +208,23 @@ function History() {
                             ([key, timeline]) => {
                               const startTs = Object.values(timeline.entries)[0]
                                 .timestamp;
+                              let relevantPreview = previewMap[timeline.camera];
+
+                              if (relevantPreview == undefined) {
+                                relevantPreview = previewMap[timeline.camera] =
+                                  Object.values(allPreviews || []).find(
+                                    (preview) =>
+                                      preview.camera == timeline.camera &&
+                                      preview.start < startTs &&
+                                      preview.end > startTs
+                                  );
+                              }
                               return (
                                 <HistoryCard
                                   key={key}
                                   timeline={timeline}
                                   shouldAutoPlay={shouldAutoPlay}
-                                  relevantPreview={Object.values(
-                                    allPreviews || []
-                                  ).find(
-                                    (preview) =>
-                                      preview.camera == timeline.camera &&
-                                      preview.start < startTs &&
-                                      preview.end > startTs
-                                  )}
+                                  relevantPreview={relevantPreview}
                                 />
                               );
                             }
diff --git a/web-new/src/utils/dateUtil.ts b/web-new/src/utils/dateUtil.ts
index 8400aa549..053401b0b 100644
--- a/web-new/src/utils/dateUtil.ts
+++ b/web-new/src/utils/dateUtil.ts
@@ -105,7 +105,7 @@ const getResolvedTimeZone = () => {
  */
 export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: UiConfig): string => {
   const { timezone, time_format, date_style, time_style, strftime_fmt } = config;
-  const locale = window.navigator?.language || 'en-us';
+  const locale = window.navigator?.language || 'en-US';
   if (isNaN(unixTimestamp)) {
     return 'Invalid time';
   }
@@ -117,7 +117,7 @@ export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: UiC
     // use strftime_fmt if defined in config
     if (strftime_fmt) {
       const offset = getUTCOffset(date, timezone || resolvedTimeZone);
-      const strftime_locale = strftime.timezone(offset).localizeByIdentifier(locale);
+      const strftime_locale = strftime.timezone(offset);
       return strftime_locale(strftime_fmt, date);
     }