Skip to content

Commit d84fc6f

Browse files
OliverDudgeonOliverDudgeon
committed
perf(dynamic): Make some more imports dynamic to reduce bundle size
1 parent 7ecb79c commit d84fc6f

File tree

6 files changed

+130
-51
lines changed

6 files changed

+130
-51
lines changed

‎components/ProjectSelection.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Grid } from '@material-ui/core';
2+
3+
import { OrganisationAutocomplete } from './userContext/OrganisationAutocomplete';
4+
import { ProjectAutocomplete } from './userContext/ProjectAutocomplete';
5+
import { UnitAutocomplete } from './userContext/UnitAutocomplete';
6+
7+
export const ProjectSelection = () => {
8+
return (
9+
<Grid container spacing={1}>
10+
<Grid container item alignItems="center" sm={6}>
11+
<OrganisationAutocomplete />
12+
</Grid>
13+
<Grid container item alignItems="center" sm={6}>
14+
<UnitAutocomplete />
15+
</Grid>
16+
<Grid container item alignItems="center" sm={12}>
17+
<ProjectAutocomplete size="medium" />
18+
</Grid>
19+
</Grid>
20+
);
21+
};

‎components/executionsCards/ApplicationCard/ApplicationCard.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
11
import type { ApplicationSummary } from '@squonk/data-manager-client';
22

3-
import { useTheme } from '@material-ui/core';
3+
import { CircularProgress, useTheme } from '@material-ui/core';
4+
import dynamic from 'next/dynamic';
45

5-
import { BaseCard } from '../../BaseCard';
6-
import { InstancesList } from '../InstancesList';
6+
import type { BaseCardProps } from '../../BaseCard';
7+
import type { InstancesListProps } from '../InstancesList';
78
import type { ApplicationModalButtonProps } from './ApplicationModalButton';
8-
import { ApplicationModalButton } from './ApplicationModalButton';
9+
10+
const ApplicationModalButton = dynamic<ApplicationModalButtonProps>(
11+
() => import('./ApplicationModalButton').then((mod) => mod.ApplicationModalButton),
12+
{ loading: () => <CircularProgress size="1rem" /> },
13+
);
14+
15+
const InstancesList = dynamic<InstancesListProps>(
16+
() => import('../InstancesList').then((mod) => mod.InstancesList),
17+
{ loading: () => <CircularProgress size="1rem" /> },
18+
);
19+
20+
const BaseCard = dynamic<BaseCardProps>(
21+
() => import('../../BaseCard').then((mod) => mod.BaseCard),
22+
{ loading: () => <CircularProgress size="1rem" /> },
23+
);
924

1025
export interface ApplicationCardProps extends Pick<ApplicationModalButtonProps, 'projectId'> {
1126
/**

‎components/executionsCards/JobCard/JobCard.tsx‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
11
import type { JobSummary } from '@squonk/data-manager-client';
22

3-
import { Chip, Link, Typography, useTheme } from '@material-ui/core';
3+
import { Chip, CircularProgress, Link, Typography, useTheme } from '@material-ui/core';
4+
import dynamic from 'next/dynamic';
45

5-
import { BaseCard } from '../../BaseCard';
6+
import type { BaseCardProps } from '../../BaseCard';
67
import { Chips } from '../../Chips';
7-
import { InstancesList } from '../InstancesList';
8+
import type { InstancesListProps } from '../InstancesList';
89
import type { RunJobButtonProps } from './RunJobButton';
9-
import { RunJobButton } from './RunJobButton';
1010

11-
// TODO remove this once the doc_url attribute is in the DM API client
12-
type JobSummaryWithDocUrl = JobSummary & {
13-
doc_url: string;
14-
};
11+
const RunJobButton = dynamic<RunJobButtonProps>(
12+
() => import('./RunJobButton').then((mod) => mod.RunJobButton),
13+
{ loading: () => <CircularProgress size="1rem" /> },
14+
);
15+
16+
const InstancesList = dynamic<InstancesListProps>(
17+
() => import('../InstancesList').then((mod) => mod.InstancesList),
18+
{ loading: () => <CircularProgress size="1rem" /> },
19+
);
20+
21+
const BaseCard = dynamic<BaseCardProps>(
22+
() => import('../../BaseCard').then((mod) => mod.BaseCard),
23+
{ loading: () => <CircularProgress size="1rem" /> },
24+
);
1525

1626
export interface ApplicationCardProps extends Pick<RunJobButtonProps, 'projectId'> {
1727
/**
@@ -26,45 +36,38 @@ export interface ApplicationCardProps extends Pick<RunJobButtonProps, 'projectId
2636
*/
2737
export const JobCard = ({ projectId, job }: ApplicationCardProps) => {
2838
// TODO remove this once the doc_url attribute is in the DM API client
29-
const jobSummary = job as JobSummaryWithDocUrl;
3039

3140
const theme = useTheme();
3241
return (
3342
<BaseCard
3443
actions={({ setExpanded }) => (
35-
<RunJobButton
36-
jobId={jobSummary.id}
37-
projectId={projectId}
38-
onLaunch={() => setExpanded(true)}
39-
/>
44+
<RunJobButton jobId={job.id} projectId={projectId} onLaunch={() => setExpanded(true)} />
4045
)}
4146
collapsed={
4247
<InstancesList
43-
predicate={(instance) =>
44-
instance.job_id === jobSummary.id && instance.job_job === jobSummary.job
45-
}
48+
predicate={(instance) => instance.job_id === job.id && instance.job_job === job.job}
4649
/>
4750
}
4851
header={{
4952
color: theme.palette.primary.main,
50-
subtitle: jobSummary.name,
51-
avatar: jobSummary.job[0],
52-
title: jobSummary.job,
53+
subtitle: job.name,
54+
avatar: job.job[0],
55+
title: job.job,
5356
}}
5457
key={projectId} // Reset state when project changes
5558
>
56-
<Typography gutterBottom>{jobSummary.description}</Typography>
59+
<Typography gutterBottom>{job.description}</Typography>
5760
<Typography variant="body2">
58-
{jobSummary.version} –{' '}
59-
<Link href={jobSummary.doc_url} rel="noopener noreferrer" target="_blank">
61+
{job.version} –{' '}
62+
<Link href={job.doc_url} rel="noopener noreferrer" target="_blank">
6063
docs
6164
</Link>
6265
</Typography>
6366
<Typography gutterBottom>
64-
<em>{jobSummary.category || '<none>'}</em> : {jobSummary.collection}
67+
<em>{job.category || '<none>'}</em> : {job.collection}
6568
</Typography>
6669
<Chips>
67-
{jobSummary.keywords?.map((word) => (
70+
{job.keywords?.map((word) => (
6871
<Chip color="primary" key={word} label={word} size="small" variant="outlined" />
6972
))}
7073
</Chips>

‎components/results/ResultCards.tsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,28 @@
11
import type { InstanceSummary, TaskSummary } from '@squonk/data-manager-client';
22

3-
import { Grid, Typography } from '@material-ui/core';
3+
import { CircularProgress, Grid, Typography } from '@material-ui/core';
44
import dayjs from 'dayjs';
5+
import dynamic from 'next/dynamic';
56

67
import { search } from '../../utils/search';
7-
import { ResultApplicationCard } from './ResultApplicationCard';
8-
import { ResultJobCard } from './ResultJobCard';
9-
import { ResultTaskCard } from './ResultTaskCard';
8+
import type { ResultApplicationCardProps } from './ResultApplicationCard';
9+
import type { ResultJobCardProps } from './ResultJobCard';
10+
import type { ResultTaskCardProps } from './ResultTaskCard';
11+
12+
const ResultTaskCard = dynamic<ResultTaskCardProps>(
13+
() => import('./ResultTaskCard').then((mod) => mod.ResultTaskCard),
14+
{ loading: () => <CircularProgress size="1rem" /> },
15+
);
16+
17+
const ResultJobCard = dynamic<ResultJobCardProps>(
18+
() => import('./ResultJobCard').then((mod) => mod.ResultJobCard),
19+
{ loading: () => <CircularProgress size="1rem" /> },
20+
);
21+
22+
const ResultApplicationCard = dynamic<ResultApplicationCardProps>(
23+
() => import('./ResultApplicationCard').then((mod) => mod.ResultApplicationCard),
24+
{ loading: () => <CircularProgress size="1rem" /> },
25+
);
1026

1127
export interface ResultCardsProps {
1228
/**

‎pages/project.tsx‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,39 @@ import { useGetProjects } from '@squonk/data-manager-client/project';
33
import { withPageAuthRequired } from '@auth0/nextjs-auth0';
44
import { css } from '@emotion/react';
55
import { Box, Container, Grid, Typography } from '@material-ui/core';
6+
import dynamic from 'next/dynamic';
67
import Head from 'next/head';
78
import Image from 'next/image';
89

910
import { CenterLoader } from '../components/CenterLoader';
1011
import Layout from '../components/Layout';
11-
import { ProjectTable } from '../components/ProjectTable';
12-
import { ProjectFileUpload } from '../components/ProjectTable/ProjectFileUpload';
13-
import { OrganisationAutocomplete } from '../components/userContext/OrganisationAutocomplete';
14-
import { ProjectAutocomplete } from '../components/userContext/ProjectAutocomplete';
15-
import { UnitAutocomplete } from '../components/userContext/UnitAutocomplete';
12+
import type { ProjectTableProps } from '../components/ProjectTable';
13+
import type { ProjectFileUploadProps } from '../components/ProjectTable/ProjectFileUpload';
14+
import type { ProjectAutocompleteProps } from '../components/userContext/ProjectAutocomplete';
1615
import { useCurrentProject } from '../hooks/projectHooks';
1716
import { RoleRequired } from '../utils/RoleRequired';
1817

18+
const ProjectSelection = dynamic<unknown>(
19+
() => import('../components/ProjectSelection').then((mod) => mod.ProjectSelection),
20+
{ loading: () => <CenterLoader /> },
21+
);
22+
23+
const ProjectTable = dynamic<ProjectTableProps>(
24+
() => import('../components/ProjectTable').then((mod) => mod.ProjectTable),
25+
{ loading: () => <CenterLoader /> },
26+
);
27+
28+
const ProjectFileUpload = dynamic<ProjectFileUploadProps>(
29+
() => import('../components/ProjectTable/ProjectFileUpload').then((mod) => mod.ProjectFileUpload),
30+
{ loading: () => <CenterLoader /> },
31+
);
32+
33+
const ProjectAutocomplete = dynamic<ProjectAutocompleteProps>(
34+
() =>
35+
import('../components/userContext/ProjectAutocomplete').then((mod) => mod.ProjectAutocomplete),
36+
{ loading: () => <CenterLoader /> },
37+
);
38+
1939
/**
2040
* The project page display and allows the user to manage files inside a project.
2141
*/
@@ -79,17 +99,7 @@ const Project = () => {
7999
width={150}
80100
/>
81101
<Box marginY={1}>
82-
<Grid container spacing={1}>
83-
<Grid container item alignItems="center" sm={6}>
84-
<OrganisationAutocomplete />
85-
</Grid>
86-
<Grid container item alignItems="center" sm={6}>
87-
<UnitAutocomplete />
88-
</Grid>
89-
<Grid container item alignItems="center" sm={12}>
90-
<ProjectAutocomplete size="medium" />
91-
</Grid>
92-
</Grid>
102+
<ProjectSelection />
93103
</Box>
94104
</div>
95105
)}

‎pages/results/instance/[instanceId].tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,31 @@ import { withPageAuthRequired } from '@auth0/nextjs-auth0';
66
import { css } from '@emotion/react';
77
import { Box, Button, Container, IconButton, Tooltip, Typography } from '@material-ui/core';
88
import RefreshRoundedIcon from '@material-ui/icons/RefreshRounded';
9+
import dynamic from 'next/dynamic';
910
import Head from 'next/head';
1011
import NextLink from 'next/link';
1112
import { useRouter } from 'next/router';
1213

1314
import { CenterLoader } from '../../../components/CenterLoader';
1415
import Layout from '../../../components/Layout';
15-
import { ResultApplicationCard } from '../../../components/results/ResultApplicationCard';
16-
import { ResultJobCard } from '../../../components/results/ResultJobCard';
16+
import type { ResultApplicationCardProps } from '../../../components/results/ResultApplicationCard';
17+
import type { ResultJobCardProps } from '../../../components/results/ResultJobCard';
1718
import { APP_ROUTES } from '../../../constants/routes';
1819
import { RoleRequired } from '../../../utils/RoleRequired';
1920

21+
const ResultJobCard = dynamic<ResultJobCardProps>(
22+
() => import('../../../components/results/ResultJobCard').then((mod) => mod.ResultJobCard),
23+
{ loading: () => <CenterLoader /> },
24+
);
25+
26+
const ResultApplicationCard = dynamic<ResultApplicationCardProps>(
27+
() =>
28+
import('../../../components/results/ResultApplicationCard').then(
29+
(mod) => mod.ResultApplicationCard,
30+
),
31+
{ loading: () => <CenterLoader /> },
32+
);
33+
2034
const Result = () => {
2135
const queryClient = useQueryClient();
2236

0 commit comments

Comments
 (0)