From 4d45c503d36325c11ae81210de7f06aea235935a Mon Sep 17 00:00:00 2001
From: Filip Czaplicki <github@starsep.com>
Date: Sat, 24 Feb 2024 00:31:05 +0100
Subject: [PATCH] Lazily load opening-hours

---
 src/components/sidebar/defibrillatorDetails.tsx | 15 +++++++++------
 src/components/sidebar/openingHours.tsx         | 11 +++++++----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/sidebar/defibrillatorDetails.tsx b/src/components/sidebar/defibrillatorDetails.tsx
index 5e30283..3ab1ebe 100644
--- a/src/components/sidebar/defibrillatorDetails.tsx
+++ b/src/components/sidebar/defibrillatorDetails.tsx
@@ -8,7 +8,7 @@ import {
 	mdiPhoneOutline,
 } from "@mdi/js";
 import Icon from "@mdi/react";
-import React, { FC, useState } from "react";
+import React, { FC, Suspense, useState } from "react";
 import { Button, Card, Columns, Image } from "react-bulma-components";
 import { useTranslation } from "react-i18next";
 import ImageGallery, { ReactImageGalleryItem } from "react-image-gallery";
@@ -29,9 +29,10 @@ import {
 	ViewButton,
 } from "./buttons";
 import DetailTextRow from "./detailTextRow";
-import { OpeningHoursField } from "./openingHours";
 import { CheckDateField } from "./verificationDate";
 
+const OpeningHoursField = React.lazy(() => import("./openingHours"));
+
 const PhotoGallery: FC<DefibrillatorDetailsProps> = ({
 	data,
 	closeSidebar,
@@ -208,10 +209,12 @@ const DefibrillatorDetails: FC<DefibrillatorDetailsProps> = (props) => {
 							/>
 						</Columns.Column>
 						<Columns.Column className="py-1">
-							<OpeningHoursField
-								openingHours={data.tags.opening_hours}
-								timezoneOffsetUTCMinutes={data.timezoneOffsetUTCMinutes}
-							/>
+							<Suspense fallback={<div>Loading...</div>}>
+								<OpeningHoursField
+									openingHours={data.tags.opening_hours}
+									timezoneOffsetUTCMinutes={data.timezoneOffsetUTCMinutes}
+								/>
+							</Suspense>
 						</Columns.Column>
 					</Columns>
 					<Columns vCentered className="is-mobile">
diff --git a/src/components/sidebar/openingHours.tsx b/src/components/sidebar/openingHours.tsx
index cb61e3b..1bb911b 100644
--- a/src/components/sidebar/openingHours.tsx
+++ b/src/components/sidebar/openingHours.tsx
@@ -1,4 +1,5 @@
-import OpeningHours, { argument_hash } from "opening_hours";
+import OpeningHours from "opening_hours";
+import type { argument_hash } from "opening_hours";
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -74,7 +75,7 @@ function isCurrentlyOpen(
 	}
 }
 
-export const CurrentlyOpenStatus: FC<OpeningHoursProps> = ({
+const CurrentlyOpenStatus: FC<OpeningHoursProps> = ({
 	openingHours,
 	timezoneOffsetUTCMinutes,
 }) => {
@@ -97,7 +98,7 @@ export const CurrentlyOpenStatus: FC<OpeningHoursProps> = ({
 	);
 };
 
-export const OpeningHoursDescription: FC<OpeningHoursProps> = ({
+const OpeningHoursDescription: FC<OpeningHoursProps> = ({
 	openingHours,
 	timezoneOffsetUTCMinutes,
 }) => {
@@ -123,7 +124,7 @@ export const OpeningHoursDescription: FC<OpeningHoursProps> = ({
 	);
 };
 
-export const OpeningHoursField: FC<OpeningHoursProps> = ({
+const OpeningHoursField: FC<OpeningHoursProps> = ({
 	openingHours,
 	timezoneOffsetUTCMinutes,
 }) => {
@@ -141,3 +142,5 @@ export const OpeningHoursField: FC<OpeningHoursProps> = ({
 		</div>
 	);
 };
+
+export default OpeningHoursField;