renati/music-repo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lazy load OpenSheetMusicDisplay

Browse Source
This commit is contained in:
Szymon Nowakowski
2024-11-30 10:42:59 +01:00
parent 570629737e
commit 26bcfc684a
2 changed files with 48 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/src/opensheetmusicdisplay.ts Normal file
View File

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

14
packages/frontend/src/routes/Attachment.tsx
View File

@@ -1,13 +1,15 @@
import { AttachmentId, PieceId } from "common"; 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 { useParams } from "react-router-dom";
import { client } from "../client"; import { client } from "../client";
import { useLoading } from "../loading"; 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");
return {
default: function Attachment() {
const params = useParams(); const params = useParams();
const pieceId = PieceId(params.pieceId!); const pieceId = PieceId(params.pieceId!);
@@ -59,4 +61,6 @@ export function Attachment() {
} }
return <div ref={containerRef} className="w-full h-full overflow-scroll sheet-music-display" />; return <div ref={containerRef} className="w-full h-full overflow-scroll sheet-music-display" />;
} },
};
});