lazy load some stuff

[alttp.git] / resources / js / components / common / PngDialog.js

diff --git a/resources/js/components/common/PngDialog.js b/resources/js/components/common/PngDialog.js
index dbd030f47674ed5961550c55064952fd5dc5e248..1984848727e3b242d040e8ba78c9e22494ee049c 100644 (file)
--- 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>;