Lazily load opening-hours

openstreetmap-polska · Feb 23, 2024 · 4d45c50 · 4d45c50
1 parent 6ef3af2
commit 4d45c50
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git 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
@@ -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;