lazy load some stuff

[alttp.git] / resources / js / components / tournament / ScoreChartDialog.js

diff --git a/resources/js/components/tournament/ScoreChartDialog.js b/resources/js/components/tournament/ScoreChartDialog.js
index 84e387353e3b67371b4c96ba45067bba20383654..2a04d1d049b7dc8032610ff47147b8f06e13fc49 100644 (file)
--- a/resources/js/components/tournament/ScoreChartDialog.js
+++ b/resources/js/components/tournament/ScoreChartDialog.js
@@ -3,22 +3,26 @@ import React from 'react';
 import { Button, Modal } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
-import ScoreChart from './ScoreChart';
+import Loading from '../common/Loading';
 import i18n from '../../i18n';
 
+const ScoreChart = React.lazy(() => import('./ScoreChart'));
+
 const ScoreChartDialog = ({
        onHide,
        show,
        tournament,
 }) =>
-<Modal className="score-chart-dialog" onHide={onHide} show={show} size="lg">
+<Modal className="score-chart-dialog" dialogClassName="modal-90w" onHide={onHide} show={show}>
        <Modal.Header closeButton>
                <Modal.Title>
                        {i18n.t('tournaments.scoreChart')}
                </Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ height: '80vh' }}>
-               <ScoreChart tournament={tournament} />
+               <React.Suspense fallback={<Loading />}>
+                       <ScoreChart tournament={tournament} />
+               </React.Suspense>
        </Modal.Body>
        <Modal.Footer>
                <Button onClick={onHide} variant="secondary">