Load more efficiently

This commit is contained in:
Nick Mowen 2023-12-13 15:46:55 -07:00
parent 7e13501787
commit cfefdb2fb0
2 changed files with 18 additions and 12 deletions

View File

@ -161,7 +161,7 @@ function History() {
[size, setSize, isValidating, isDone] [size, setSize, isValidating, isDone]
); );
if (!config || !timelineCards) { if (!config || !timelineCards ||timelineCards.length == 0) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
@ -186,12 +186,14 @@ function History() {
{Object.entries(timelineDay).map( {Object.entries(timelineDay).map(
([hour, timelineHour], hourIdx) => { ([hour, timelineHour], hourIdx) => {
if (Object.values(timelineHour).length == 0) { if (Object.values(timelineHour).length == 0) {
return <></>; return <div key={hour}></div>;
} }
const lastRow = const lastRow =
dayIdx == Object.values(timelineCards).length - 1 && dayIdx == Object.values(timelineCards).length - 1 &&
hourIdx == Object.values(timelineDay).length - 1; hourIdx == Object.values(timelineDay).length - 1;
const previewMap: { [key: string]: Preview | undefined } =
{};
return ( return (
<div key={hour} ref={lastRow ? lastTimelineRef : null}> <div key={hour} ref={lastRow ? lastTimelineRef : null}>
@ -206,19 +208,23 @@ function History() {
([key, timeline]) => { ([key, timeline]) => {
const startTs = Object.values(timeline.entries)[0] const startTs = Object.values(timeline.entries)[0]
.timestamp; .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 ( return (
<HistoryCard <HistoryCard
key={key} key={key}
timeline={timeline} timeline={timeline}
shouldAutoPlay={shouldAutoPlay} shouldAutoPlay={shouldAutoPlay}
relevantPreview={Object.values( relevantPreview={relevantPreview}
allPreviews || []
).find(
(preview) =>
preview.camera == timeline.camera &&
preview.start < startTs &&
preview.end > startTs
)}
/> />
); );
} }

View File

@ -105,7 +105,7 @@ const getResolvedTimeZone = () => {
*/ */
export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: UiConfig): string => { export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: UiConfig): string => {
const { timezone, time_format, date_style, time_style, strftime_fmt } = config; 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)) { if (isNaN(unixTimestamp)) {
return 'Invalid time'; return 'Invalid time';
} }
@ -117,7 +117,7 @@ export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: UiC
// use strftime_fmt if defined in config // use strftime_fmt if defined in config
if (strftime_fmt) { if (strftime_fmt) {
const offset = getUTCOffset(date, timezone || resolvedTimeZone); 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); return strftime_locale(strftime_fmt, date);
} }