Lazy load OpenSheetMusicDisplay

packages/frontend/src/opensheetmusicdisplay.ts

@@ -0,0 +1 @@
+export { OpenSheetMusicDisplay as default } from "opensheetmusicdisplay";

packages/frontend/src/routes/Attachment.tsx

@@ -1,62 +1,66 @@
 import { AttachmentId, PieceId } from "common";
-import { OpenSheetMusicDisplay } from "opensheetmusicdisplay";
+import { lazy, useEffect, useRef } from "react";
-import { useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
 import { client } from "../client";
 import { useLoading } from "../loading";
 
-// TODO: Lazy load `opensheetmusicdisplay` (don't bundle into main script).
+export const Attachment = lazy(async () => {
 
-export function Attachment() {
+	const { default: OpenSheetMusicDisplay } = await import("../opensheetmusicdisplay.ts");
 
-	const params = useParams();
+	return {
-	const pieceId = PieceId(params.pieceId!);
+		default: function Attachment() {
-	const attachmentId = AttachmentId(params.attachmentId!);
 
-	const { isLoading, error, data } = useLoading(() => client.piece({ pieceId }).attachment({ attachmentId }).get());
+			const params = useParams();
+			const pieceId = PieceId(params.pieceId!);
+			const attachmentId = AttachmentId(params.attachmentId!);
 
-	const containerRef = useRef<HTMLDivElement>(null);
+			const { isLoading, error, data } = useLoading(() => client.piece({ pieceId }).attachment({ attachmentId }).get());
 
-	useEffect(() => {
+			const containerRef = useRef<HTMLDivElement>(null);
-		if (isLoading || error !== null) return;
 
-		const url = URL.createObjectURL(data?.data);
+			useEffect(() => {
+				if (isLoading || error !== null) return;
 
-		const render = () => osmd.render();
+				const url = URL.createObjectURL(data?.data);
 
-		const osmd = new OpenSheetMusicDisplay(containerRef.current!, {
+				const render = () => osmd.render();
-			autoResize: false,
-			drawTitle: false,
-			drawComposer: false,
-			drawMeasureNumbers: true,
-			drawMeasureNumbersOnlyAtSystemStart: true,
-			//measureNumberInterval: 5,
-			//renderSingleHorizontalStaffline: true,
-		});
 
-		osmd.load(url).then(render);
+				const osmd = new OpenSheetMusicDisplay(containerRef.current!, {
+					autoResize: false,
+					drawTitle: false,
+					drawComposer: false,
+					drawMeasureNumbers: true,
+					drawMeasureNumbersOnlyAtSystemStart: true,
+					//measureNumberInterval: 5,
+					//renderSingleHorizontalStaffline: true,
+				});
 
-		window.addEventListener("resize", render);
+				osmd.load(url).then(render);
 
-		return () => {
+				window.addEventListener("resize", render);
-			URL.revokeObjectURL(url);
-			window.removeEventListener("resize", render);
-		};
-	}, [isLoading, data]);
 
-	if (isLoading) {
+				return () => {
-		return (
+					URL.revokeObjectURL(url);
-			<div className="w-full h-full overflow-hidden flex items-center justify-center">
+					window.removeEventListener("resize", render);
-				<div>Ładowanie…</div>
+				};
-			</div>
+			}, [isLoading, data]);
-		);
-	}
 
-	if (error !== null) {
+			if (isLoading) {
-		<div className="w-full h-full overflow-hidden flex items-center justify-center">
+				return (
-			<div>Wystąpił błąd: {error.value}</div>
+					<div className="w-full h-full overflow-hidden flex items-center justify-center">
-		</div>
+						<div>Ładowanie…</div>
-	}
+					</div>
+				);
+			}
 
-	return <div ref={containerRef} className="w-full h-full overflow-scroll sheet-music-display" />;
+			if (error !== null) {
-}
+				<div className="w-full h-full overflow-hidden flex items-center justify-center">
+					<div>Wystąpił błąd: {error.value}</div>
+				</div>
+			}
+
+			return <div ref={containerRef} className="w-full h-full overflow-scroll sheet-music-display" />;
+		},
+	};
+});