Skip to content

Commit adcae57

Browse files
Alessandro100Alessandro100
authored
Feat: 816 feed detail performance (#822)
* performance improvements
1 parent 99cf3c7 commit adcae57

File tree

15 files changed

+170
-207
lines changed

15 files changed

+170
-207
lines changed

‎web-app/package.json‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@
55
"dependencies": {
66
"@emotion/react": "^11.13.0",
77
"@emotion/styled": "^11.13.0",
8-
"@fortawesome/fontawesome-svg-core": "^6.4.2",
9-
"@fortawesome/free-brands-svg-icons": "^6.4.2",
10-
"@fortawesome/free-regular-svg-icons": "^6.4.2",
11-
"@fortawesome/free-solid-svg-icons": "^6.4.2",
12-
"@fortawesome/react-fontawesome": "^0.2.0",
138
"@mui/icons-material": "^5.16.4",
149
"@mui/material": "^5.16.4",
1510
"@mui/x-date-pickers": "^7.11.0",
@@ -41,7 +36,6 @@
4136
"react-hook-form": "^7.52.1",
4237
"react-i18next": "^14.1.2",
4338
"react-leaflet": "^4.2.1",
44-
"react-loading-overlay-ts": "^2.0.2",
4539
"react-redux": "^8.1.3",
4640
"react-router-dom": "^6.16.0",
4741
"react-scripts": "5.0.1",

‎web-app/public/index.html‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,37 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
4+
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
5+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
6+
<link
7+
rel="preload"
8+
as="style"
9+
onload="this.onload=null;this.rel='stylesheet'"
10+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,300;0,500;0,700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link
14+
rel="preload"
15+
as="style"
16+
onload="this.onload=null;this.rel='stylesheet'"
17+
href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap"
18+
rel="stylesheet"
19+
/>
20+
<noscript>
21+
<link
22+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,300;0,500;0,700&display=swap"
23+
rel="stylesheet"
24+
/>
25+
<link
26+
href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap"
27+
rel="stylesheet"
28+
/>
29+
</noscript>
430
<meta charset="utf-8" />
531
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
632
<meta name="viewport" content="width=device-width, initial-scale=1" />
733
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Mobility Database"
11-
/>
34+
<meta name="description" content="Mobility Database" />
1235
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1336
<!--
1437
manifest.json provides metadata used when your web app is installed on a
@@ -24,10 +47,6 @@
2447
work correctly both with client-side routing and a non-root public URL.
2548
Learn how to configure a non-root public URL by running `npm run build`.
2649
-->
27-
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
28-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
29-
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
30-
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
3150
<title>Mobility Database</title>
3251
</head>
3352
<body>

‎web-app/src/app/App.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
}
3939

4040
#app-main-container {
41-
height: 100vh;
42-
display: flex;
43-
flex-direction: column;
44-
justify-content: space-between;
41+
position: relative;
42+
min-height: 100vh;
43+
padding-bottom: 230px; /* footer space */
44+
box-sizing: border-box;
4545
}

‎web-app/src/app/App.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import './App.css';
22
import AppRouter from './router/Router';
3-
import Footer from './components/Footer';
4-
import Header from './components/Header';
53
import { BrowserRouter } from 'react-router-dom';
6-
import AppSpinner from './components/AppSpinner';
74
import { RemoteConfigProvider } from './context/RemoteConfigProvider';
85
import { useDispatch } from 'react-redux';
96
import { anonymousLogin } from './store/profile-reducer';
@@ -13,6 +10,7 @@ import { I18nextProvider } from 'react-i18next';
1310
import { app } from '../firebase';
1411
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
1512
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
13+
import AppContainer from './AppContainer';
1614

1715
function App(): React.ReactElement {
1816
const dispatch = useDispatch();
@@ -35,15 +33,9 @@ function App(): React.ReactElement {
3533
<I18nextProvider i18n={i18n}>
3634
<Suspense>
3735
<LocalizationProvider dateAdapter={AdapterDayjs}>
38-
<div id='app-main-container'>
39-
<AppSpinner>
40-
<BrowserRouter>
41-
<Header />
42-
{isAppReady ? <AppRouter /> : null}
43-
</BrowserRouter>
44-
</AppSpinner>
45-
<Footer />
46-
</div>
36+
<BrowserRouter>
37+
<AppContainer>{isAppReady ? <AppRouter /> : null}</AppContainer>
38+
</BrowserRouter>
4739
</LocalizationProvider>
4840
</Suspense>
4941
</I18nextProvider>

‎web-app/src/app/AppContainer.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from 'react';
2+
import { useSelector } from 'react-redux';
3+
import { Box, LinearProgress } from '@mui/material';
4+
import { selectLoadingApp } from './store/selectors';
5+
import type ContextProviderProps from './interface/ContextProviderProps';
6+
import Footer from './components/Footer';
7+
import Header from './components/Header';
8+
import { useLocation } from 'react-router-dom';
9+
10+
const AppContainer: React.FC<ContextProviderProps> = ({ children }) => {
11+
const isAppLoading = useSelector(selectLoadingApp);
12+
const location = useLocation();
13+
14+
React.useLayoutEffect(() => {
15+
window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
16+
}, [location.pathname]);
17+
18+
return (
19+
<Box id='app-main-container'>
20+
<Header />
21+
{isAppLoading ? (
22+
<Box sx={{ width: '100%', mt: '-31px' }}>
23+
<LinearProgress />
24+
</Box>
25+
) : (
26+
children
27+
)}
28+
<Footer />
29+
</Box>
30+
);
31+
};
32+
33+
export default AppContainer;

‎web-app/src/app/components/AppSpinner.tsx‎

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

‎web-app/src/app/components/Footer.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,23 @@ import React from 'react';
22
import '../styles/Footer.css';
33
import TwitterIcon from '@mui/icons-material/Twitter';
44
import { Button, IconButton } from '@mui/material';
5-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6-
import { faSlack } from '@fortawesome/free-brands-svg-icons';
75
import { GitHub, LinkedIn, OpenInNew } from '@mui/icons-material';
86
import { MOBILITY_DATA_LINKS } from '../constants/Navigation';
9-
import { fontFamily } from '../Theme';
7+
import { fontFamily, theme } from '../Theme';
8+
9+
const SlackSvg = (
10+
<svg
11+
xmlns='http://www.w3.org/2000/svg'
12+
width='24px'
13+
height='24px'
14+
viewBox='0 0 24 24'
15+
>
16+
<path
17+
fill={theme.palette.primary.main}
18+
d='M6 15a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2h2zm1 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2a2 2 0 0 1-2-2zm2-8a2 2 0 0 1-2-2a2 2 0 0 1 2-2a2 2 0 0 1 2 2v2zm0 1a2 2 0 0 1 2 2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2a2 2 0 0 1 2-2zm8 2a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2h-2zm-1 0a2 2 0 0 1-2 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2a2 2 0 0 1 2 2zm-2 8a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2v-2zm0-1a2 2 0 0 1-2-2a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2a2 2 0 0 1-2 2z'
19+
/>
20+
</svg>
21+
);
1022

1123
const Footer: React.FC = () => {
1224
const navigateTo = (link: string): void => {
@@ -52,7 +64,7 @@ const Footer: React.FC = () => {
5264
navigateTo(MOBILITY_DATA_LINKS.slack);
5365
}}
5466
>
55-
<FontAwesomeIcon icon={faSlack} />
67+
{SlackSvg}
5668
</IconButton>
5769
<IconButton
5870
aria-label='linkedin'

‎web-app/src/app/components/Header.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import i18n from '../../i18n';
4545
import { NestedMenuItem } from 'mui-nested-menu';
4646
import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
4747
import { fontFamily, theme } from '../Theme';
48+
import { defaultRemoteConfigValues } from '../interface/RemoteConfig';
4849

4950
const drawerWidth = 240;
5051
const websiteTile = 'Mobility Database';
@@ -246,7 +247,7 @@ export default function DrawerAppBar(): React.ReactElement {
246247
const [activeTab, setActiveTab] = React.useState('');
247248
const [navigationItems, setNavigationItems] = React.useState<
248249
NavigationItem[]
249-
>([]);
250+
>(buildNavigationItems(defaultRemoteConfigValues));
250251
const [currentLanguage, setCurrentLanguage] = React.useState<
251252
string | undefined
252253
>(i18n.language);

‎web-app/src/app/constants/Navigation.spec.ts‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,4 @@ describe('Navigation Elements', () => {
2323
);
2424
expect(feedsNavigation).toBeDefined();
2525
});
26-
27-
it('should not return feed nav item if feature flag disabled', () => {
28-
const featureFlags: RemoteConfigValues = {
29-
...defaultRemoteConfigValues,
30-
enableFeedsPage: false,
31-
};
32-
const navigationItems = buildNavigationItems(featureFlags);
33-
const feedsNavigation = navigationItems.find(
34-
(item) => item.title === 'Feeds',
35-
);
36-
expect(feedsNavigation).toBeUndefined();
37-
});
3826
});

‎web-app/src/app/constants/Navigation.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,11 @@ export function buildNavigationItems(
3131
},
3232
];
3333

34-
if (featureFlags.enableFeedsPage) {
35-
navigationItems.push({
36-
title: 'Feeds',
37-
target: 'feeds',
38-
color: 'inherit',
39-
});
40-
}
34+
navigationItems.push({
35+
title: 'Feeds',
36+
target: 'feeds',
37+
color: 'inherit',
38+
});
4139

4240
navigationItems.push(
4341
...[

0 commit comments

Comments
 (0)