Skip to content

Commit dc08175

Browse files
Alessandro100Alessandro100
authored
Merge pull request #97 from MobilityData/feat/performance-reduce-initial-load
feat: performance reduce initial load
2 parents 418fcdf + 3a4adb0 commit dc08175

10 files changed

Lines changed: 98 additions & 97 deletions

File tree

‎src/app/[locale]/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,9 @@ export default async function LocaleLayout({
101101
<link rel='preconnect' href='https://firebaseapp.com' />
102102
<link rel='dns-prefetch' href='https://firebaseapp.com' />
103103
</head>
104-
<body className={`${mulish.variable} ${ibmPlexMono.variable}`}>
104+
<body
105+
className={`${mulish.className} ${mulish.variable} ${ibmPlexMono.variable}`}
106+
>
105107
<InitColorSchemeScript attribute='class' />
106108
<ThemeRegistry>
107109
<NextIntlClientProvider messages={messages}>

‎src/app/components/CoveredAreaMap.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import { computeBoundingBox } from '../screens/Feed/Feed.functions';
3333
import { displayFormattedDate } from '../utils/date';
3434
import { useSelector } from 'react-redux';
3535
import ModeOfTravelIcon from '@mui/icons-material/ModeOfTravel';
36-
import { GtfsVisualizationMap } from './GtfsVisualizationMap';
3736
import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
3837
import { useRemoteConfig } from '../context/RemoteConfigProvider';
3938
import { sendGAEvent } from '@next/third-parties/google';
@@ -45,6 +44,13 @@ import {
4544

4645
// Dynamically import Map and MapGeoJSON for code splitting and bundle size
4746
// Useful since these components are rendered conditionally to the tab and will only import when on page
47+
const GtfsVisualizationMap = dynamic(
48+
async () =>
49+
await import('./GtfsVisualizationMap').then(
50+
(mod) => mod.GtfsVisualizationMap,
51+
),
52+
{ ssr: false },
53+
);
4854
const MapGeoJSON = dynamic(
4955
async () => await import('./MapGeoJSON').then((mod) => mod.MapGeoJSON),
5056
{ ssr: false },

‎src/app/screens/Analytics/GBFSFeedAnalytics/GBFSFeedAnalyticsTable.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,20 @@ export const useTableColumns = (): Array<
8989
}) => (
9090
<div>
9191
{cell.getValue<string[]>()?.map((version, index) => (
92-
<div
92+
<Box
9393
key={index}
94-
style={{
94+
sx={{
9595
cursor: 'pointer',
96-
marginBottom: 2,
97-
padding: 1,
96+
marginBottom: '2px',
97+
padding: '1px',
98+
'&:hover': { textDecoration: 'underline', color: '#000' },
9899
}}
99-
className={'navigable-list-item'}
100100
onClick={() => {
101101
router.push(`/metrics/gbfs/versions?version=${version}`);
102102
}}
103103
>
104104
{version}
105-
</div>
105+
</Box>
106106
))}
107107
</div>
108108
),

‎src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import {
2424
Typography,
2525
} from '@mui/material';
2626

27-
import '../analytics.css';
2827
import { useSearchParams } from 'next/navigation';
2928
import {
3029
fetchAvailableFilesStart,

‎src/app/screens/Analytics/GTFSFeedAnalytics/GTFSFeedAnalyticsTable.tsx‎

Lines changed: 73 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,19 @@ export const useTableColumns = (
5151
title={`Open feed ${cell.getValue<string>()} page in new tab`}
5252
placement='top-start'
5353
>
54-
<div
55-
className={'navigable-list-item'}
54+
<Box
55+
sx={{
56+
cursor: 'pointer',
57+
'&:hover': { textDecoration: 'underline', color: '#000' },
58+
}}
5659
onClick={() => {
5760
const url = `/feeds/${cell.getValue<string>()}`;
5861
window.open(url, '_blank');
5962
}}
6063
>
6164
{renderedCellValue}{' '}
6265
<OpenInNew sx={{ verticalAlign: 'middle' }} fontSize='small' />
63-
</div>
66+
</Box>
6467
</Tooltip>
6568
),
6669
},
@@ -157,20 +160,20 @@ export const useTableColumns = (
157160
Cell: ({ cell }: { cell: MRT_Cell<GTFSFeedMetrics> }) => (
158161
<div>
159162
{cell.getValue<string[]>()?.map((error, index) => (
160-
<div
163+
<Box
161164
key={index}
162-
style={{
165+
sx={{
163166
cursor: 'pointer',
164-
marginBottom: 2,
165-
padding: 1,
167+
marginBottom: '2px',
168+
padding: '1px',
169+
'&:hover': { textDecoration: 'underline', color: '#000' },
166170
}}
167-
className={'navigable-list-item'}
168171
onClick={() => {
169172
router.push(`/metrics/gtfs/notices?noticeCode=${error}`);
170173
}}
171174
>
172175
{error}
173-
</div>
176+
</Box>
174177
))}
175178
</div>
176179
),
@@ -180,9 +183,20 @@ export const useTableColumns = (
180183
Header: (
181184
<span>
182185
Notice Severity :
183-
<span className='notice-severity-error notice-severity-label'>
186+
<Box
187+
component='span'
188+
sx={{
189+
borderRadius: '5px',
190+
padding: '5px',
191+
marginLeft: '5px',
192+
marginBottom: '2px',
193+
width: 'fit-content',
194+
backgroundColor: '#d54402',
195+
color: 'white',
196+
}}
197+
>
184198
ERROR
185-
</span>
199+
</Box>
186200
</span>
187201
),
188202
Footer: () => (
@@ -199,20 +213,20 @@ export const useTableColumns = (
199213
Cell: ({ cell }: { cell: MRT_Cell<GTFSFeedMetrics> }) => (
200214
<div>
201215
{cell.getValue<string[]>()?.map((warning, index) => (
202-
<div
216+
<Box
203217
key={index}
204-
style={{
218+
sx={{
205219
cursor: 'pointer',
206-
marginBottom: 2,
207-
padding: 1,
220+
marginBottom: '2px',
221+
padding: '1px',
222+
'&:hover': { textDecoration: 'underline', color: '#000' },
208223
}}
209-
className={'navigable-list-item'}
210224
onClick={() => {
211225
router.push(`/metrics/gtfs/notices?noticeCode=${warning}`);
212226
}}
213227
>
214228
{warning}
215-
</div>
229+
</Box>
216230
))}
217231
</div>
218232
),
@@ -222,9 +236,20 @@ export const useTableColumns = (
222236
Header: (
223237
<span>
224238
Notice Severity :
225-
<span className='notice-severity-warning notice-severity-label'>
239+
<Box
240+
component='span'
241+
sx={{
242+
borderRadius: '5px',
243+
padding: '5px',
244+
marginLeft: '5px',
245+
marginBottom: '2px',
246+
width: 'fit-content',
247+
backgroundColor: '#f3c280',
248+
color: 'black',
249+
}}
250+
>
226251
WARNING
227-
</span>
252+
</Box>
228253
</span>
229254
),
230255
Footer: () => (
@@ -241,28 +266,39 @@ export const useTableColumns = (
241266
Header: (
242267
<span>
243268
Notice Severity :
244-
<span className='notice-severity-info notice-severity-label'>
269+
<Box
270+
component='span'
271+
sx={{
272+
borderRadius: '5px',
273+
padding: '5px',
274+
marginLeft: '5px',
275+
marginBottom: '2px',
276+
width: 'fit-content',
277+
backgroundColor: '#badfb7',
278+
color: 'black',
279+
}}
280+
>
245281
INFO
246-
</span>
282+
</Box>
247283
</span>
248284
),
249285
Cell: ({ cell }: { cell: MRT_Cell<GTFSFeedMetrics> }) => (
250286
<div>
251287
{cell.getValue<string[]>()?.map((info, index) => (
252-
<div
288+
<Box
253289
key={index}
254-
style={{
290+
sx={{
255291
cursor: 'pointer',
256-
marginBottom: 2,
257-
padding: 1,
292+
marginBottom: '2px',
293+
padding: '1px',
294+
'&:hover': { textDecoration: 'underline', color: '#000' },
258295
}}
259-
className={'navigable-list-item'}
260296
onClick={() => {
261297
router.push(`/metrics/gtfs/notices?noticeCode=${info}`);
262298
}}
263299
>
264300
{info}
265-
</div>
301+
</Box>
266302
))}
267303
</div>
268304
),
@@ -313,10 +349,16 @@ export const useTableColumns = (
313349
{group}
314350
</div>
315351
{features.map((featureData, index) => (
316-
<div
352+
<Box
317353
key={index}
318-
style={{ cursor: 'pointer', marginLeft: '10px' }}
319-
className={'navigable-list-item'}
354+
sx={{
355+
cursor: 'pointer',
356+
marginLeft: '10px',
357+
'&:hover': {
358+
textDecoration: 'underline',
359+
color: '#000',
360+
},
361+
}}
320362
onClick={() => {
321363
router.push(
322364
`/metrics/gtfs/features?featureName=${featureData.feature}`,
@@ -332,7 +374,7 @@ export const useTableColumns = (
332374
<IconButton>{componentDecorator.icon}</IconButton>
333375
</Tooltip>
334376
)}
335-
</div>
377+
</Box>
336378
))}
337379
</div>
338380
);

‎src/app/screens/Analytics/GTFSFeedAnalytics/index.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import {
1818
Typography,
1919
} from '@mui/material';
2020

21-
import '../analytics.css';
2221
import { useSearchParams } from 'next/navigation';
2322
import {
2423
fetchAvailableFilesStart,
@@ -36,10 +35,7 @@ import { type AnalyticsFile, type GTFSFeedMetrics } from '../types';
3635
import { useRemoteConfig } from '../../../context/RemoteConfigProvider';
3736
import DownloadIcon from '@mui/icons-material/Download';
3837
import { download, generateCsv, mkConfig } from 'export-to-csv';
39-
40-
let globalAnalyticsBucketEndpoint: string | undefined;
41-
export const getAnalyticsBucketEndpoint = (): string | undefined =>
42-
globalAnalyticsBucketEndpoint;
38+
import { setAnalyticsBucketEndpoint } from '../utils';
4339

4440
export default function GTFSFeedAnalytics(): React.ReactElement {
4541
const searchParams = useSearchParams();
@@ -79,7 +75,7 @@ export default function GTFSFeedAnalytics(): React.ReactElement {
7975
};
8076

8177
React.useEffect(() => {
82-
globalAnalyticsBucketEndpoint = config.gtfsMetricsBucketEndpoint;
78+
setAnalyticsBucketEndpoint(config.gtfsMetricsBucketEndpoint);
8379
dispatch(fetchAvailableFilesStart());
8480
}, [dispatch, config.gtfsMetricsBucketEndpoint]);
8581

‎src/app/screens/Analytics/analytics.css‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/app/screens/Feed/components/FeedSummary.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,16 @@ import {
5151
StyledListItem,
5252
} from '../Feed.styles';
5353
import { getFeatureComponentDecorators } from '../../../utils/consts';
54-
import Locations from '../../../components/Locations';
54+
import dynamic from 'next/dynamic';
5555
import CopyLinkElement from './CopyLinkElement';
5656
import { formatDateShort } from '../../../utils/date';
5757
import ExternalIds from './ExternalIds';
5858

59+
const Locations = dynamic(
60+
async () => await import('../../../components/Locations'),
61+
{ ssr: false },
62+
);
63+
5964
export interface FeedSummaryProps {
6065
feed: GTFSFeedType | GTFSRTFeedType | GBFSFeedType | undefined;
6166
sortedProviders: string[];

‎src/app/store/saga/gtfs-analytics-saga.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
type GTFSMetrics,
1414
} from '../../screens/Analytics/types';
1515
import { getLocationName } from '../../services/feeds/utils';
16-
import { getAnalyticsBucketEndpoint } from '../../screens/Analytics/GTFSFeedAnalytics';
16+
import { getAnalyticsBucketEndpoint } from '../../screens/Analytics/utils';
1717

1818
function* fetchFeedMetricsSaga(
1919
action: ReturnType<typeof selectFile>,

‎src/app/styles/Footer.css‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)