X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fcommon%2FPngDialog.js;h=1984848727e3b242d040e8ba78c9e22494ee049c;hb=237ebc69c5eb4fbfe226c4dcdc9711d7b18ddcd2;hp=dbd030f47674ed5961550c55064952fd5dc5e248;hpb=df85042df90aee0b09eb11a3cd5bbc98169cb765;p=alttp.git

diff --git a/resources/js/components/common/PngDialog.js b/resources/js/components/common/PngDialog.js
index dbd030f..1984848 100644
--- a/resources/js/components/common/PngDialog.js
+++ b/resources/js/components/common/PngDialog.js
@@ -2,7 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Modal } from 'react-bootstrap';
 
-import PngPlayer from './PngPlayer';
+import Loading from './Loading';
+
+const PngPlayer = React.lazy(() => import('./PngPlayer'));
 
 const PngDialog = ({ onHide, show, src, title }) => <Modal onHide={onHide} show={show} size="lg">
 	{title ?
@@ -13,7 +15,9 @@ const PngDialog = ({ onHide, show, src, title }) => <Modal onHide={onHide} show=
 		</Modal.Header>
 	: null}
 	<Modal.Body>
-		<PngPlayer src={src} />
+		<React.Suspense fallback={<Loading />}>
+			<PngPlayer src={src} />
+		</React.Suspense>
 	</Modal.Body>
 </Modal>;