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">