Feat: 816 feed detail performance (#822)

* performance improvements
MobilityData · Nov 14, 2024 · adcae57 · adcae57
1 parent 99cf3c7
commit adcae57
Show file tree

Hide file tree

Showing 15 changed files with 170 additions and 207 deletions.
diff --git a/web-app/package.json b/web-app/package.json
@@ -5,11 +5,6 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.16.4",
     "@mui/material": "^5.16.4",
     "@mui/x-date-pickers": "^7.11.0",
@@ -41,7 +36,6 @@
     "react-hook-form": "^7.52.1",
     "react-i18next": "^14.1.2",
     "react-leaflet": "^4.2.1",
-    "react-loading-overlay-ts": "^2.0.2",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",

diff --git a/web-app/public/index.html b/web-app/public/index.html
@@ -1,14 +1,37 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="preload"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,300;0,500;0,700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="preload"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+      href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap"
+      rel="stylesheet"
+    />
+    <noscript>
+      <link
+        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,300;0,500;0,700&display=swap"
+        rel="stylesheet"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap"
+        rel="stylesheet"
+      />
+    </noscript>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Mobility Database"
-    />
+    <meta name="description" content="Mobility Database" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,10 +47,6 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <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">
-    <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
     <title>Mobility Database</title>
   </head>
   <body>

diff --git a/web-app/src/app/App.css b/web-app/src/app/App.css
@@ -38,8 +38,8 @@
 }
 
 #app-main-container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  position: relative;
+  min-height: 100vh;
+  padding-bottom: 230px; /* footer space */
+  box-sizing: border-box;
 }
diff --git a/web-app/src/app/App.tsx b/web-app/src/app/App.tsx
@@ -1,9 +1,6 @@
 import './App.css';
 import AppRouter from './router/Router';
-import Footer from './components/Footer';
-import Header from './components/Header';
 import { BrowserRouter } from 'react-router-dom';
-import AppSpinner from './components/AppSpinner';
 import { RemoteConfigProvider } from './context/RemoteConfigProvider';
 import { useDispatch } from 'react-redux';
 import { anonymousLogin } from './store/profile-reducer';
@@ -13,6 +10,7 @@ import { I18nextProvider } from 'react-i18next';
 import { app } from '../firebase';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import AppContainer from './AppContainer';
 
 function App(): React.ReactElement {
   const dispatch = useDispatch();
@@ -35,15 +33,9 @@ function App(): React.ReactElement {
       <I18nextProvider i18n={i18n}>
         <Suspense>
           <LocalizationProvider dateAdapter={AdapterDayjs}>
-            <div id='app-main-container'>
-              <AppSpinner>
-                <BrowserRouter>
-                  <Header />
-                  {isAppReady ? <AppRouter /> : null}
-                </BrowserRouter>
-              </AppSpinner>
-              <Footer />
-            </div>
+            <BrowserRouter>
+              <AppContainer>{isAppReady ? <AppRouter /> : null}</AppContainer>
+            </BrowserRouter>
           </LocalizationProvider>
         </Suspense>
       </I18nextProvider>

diff --git a/web-app/src/app/AppContainer.tsx b/web-app/src/app/AppContainer.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { Box, LinearProgress } from '@mui/material';
+import { selectLoadingApp } from './store/selectors';
+import type ContextProviderProps from './interface/ContextProviderProps';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import { useLocation } from 'react-router-dom';
+
+const AppContainer: React.FC<ContextProviderProps> = ({ children }) => {
+  const isAppLoading = useSelector(selectLoadingApp);
+  const location = useLocation();
+
+  React.useLayoutEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+  }, [location.pathname]);
+
+  return (
+    <Box id='app-main-container'>
+      <Header />
+      {isAppLoading ? (
+        <Box sx={{ width: '100%', mt: '-31px' }}>
+          <LinearProgress />
+        </Box>
+      ) : (
+        children
+      )}
+      <Footer />
+    </Box>
+  );
+};
+
+export default AppContainer;
diff --git a/web-app/src/app/components/AppSpinner.tsx b/web-app/src/app/components/AppSpinner.tsx
diff --git a/web-app/src/app/components/Footer.tsx b/web-app/src/app/components/Footer.tsx
@@ -2,11 +2,23 @@ import React from 'react';
 import '../styles/Footer.css';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import { Button, IconButton } from '@mui/material';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSlack } from '@fortawesome/free-brands-svg-icons';
 import { GitHub, LinkedIn, OpenInNew } from '@mui/icons-material';
 import { MOBILITY_DATA_LINKS } from '../constants/Navigation';
-import { fontFamily } from '../Theme';
+import { fontFamily, theme } from '../Theme';
+
+const SlackSvg = (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='24px'
+    height='24px'
+    viewBox='0 0 24 24'
+  >
+    <path
+      fill={theme.palette.primary.main}
+      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'
+    />
+  </svg>
+);
 
 const Footer: React.FC = () => {
   const navigateTo = (link: string): void => {
@@ -52,7 +64,7 @@ const Footer: React.FC = () => {
             navigateTo(MOBILITY_DATA_LINKS.slack);
           }}
         >
-          <FontAwesomeIcon icon={faSlack} />
+          {SlackSvg}
         </IconButton>
         <IconButton
           aria-label='linkedin'

diff --git a/web-app/src/app/components/Header.tsx b/web-app/src/app/components/Header.tsx
@@ -45,6 +45,7 @@ import i18n from '../../i18n';
 import { NestedMenuItem } from 'mui-nested-menu';
 import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
 import { fontFamily, theme } from '../Theme';
+import { defaultRemoteConfigValues } from '../interface/RemoteConfig';
 
 const drawerWidth = 240;
 const websiteTile = 'Mobility Database';
@@ -246,7 +247,7 @@ export default function DrawerAppBar(): React.ReactElement {
   const [activeTab, setActiveTab] = React.useState('');
   const [navigationItems, setNavigationItems] = React.useState<
     NavigationItem[]
-  >([]);
+  >(buildNavigationItems(defaultRemoteConfigValues));
   const [currentLanguage, setCurrentLanguage] = React.useState<
     string | undefined
   >(i18n.language);

diff --git a/web-app/src/app/constants/Navigation.spec.ts b/web-app/src/app/constants/Navigation.spec.ts
@@ -23,16 +23,4 @@ describe('Navigation Elements', () => {
     );
     expect(feedsNavigation).toBeDefined();
   });
-
-  it('should not return feed nav item if feature flag disabled', () => {
-    const featureFlags: RemoteConfigValues = {
-      ...defaultRemoteConfigValues,
-      enableFeedsPage: false,
-    };
-    const navigationItems = buildNavigationItems(featureFlags);
-    const feedsNavigation = navigationItems.find(
-      (item) => item.title === 'Feeds',
-    );
-    expect(feedsNavigation).toBeUndefined();
-  });
 });
diff --git a/web-app/src/app/constants/Navigation.ts b/web-app/src/app/constants/Navigation.ts
@@ -31,13 +31,11 @@ export function buildNavigationItems(
     },
   ];
 
-  if (featureFlags.enableFeedsPage) {
-    navigationItems.push({
-      title: 'Feeds',
-      target: 'feeds',
-      color: 'inherit',
-    });
-  }
+  navigationItems.push({
+    title: 'Feeds',
+    target: 'feeds',
+    color: 'inherit',
+  });
 
   navigationItems.push(
     ...[

diff --git a/web-app/src/app/screens/Feed/AssociatedFeeds.tsx b/web-app/src/app/screens/Feed/AssociatedFeeds.tsx
@@ -112,12 +112,12 @@ export default function AssociatedGTFSRTFeeds({
   const gtfsFeeds =
     feeds?.filter((assocFeed) => assocFeed?.data_type === 'gtfs') ?? [];
   return (
-    <Box width={{ xs: '100%', md: '40%' }}>
+    <Box width={{ xs: '100%' }}>
       <ContentBox
         width={{ xs: '100%' }}
         title={'Related Schedule Feeds'}
         outlineColor={theme.palette.primary.dark}
-        margin={'0 0 8px'}
+        margin={`0 0 ${theme.spacing(3)}`}
         padding={2}
       >
         {feeds === undefined && <Typography>Loading...</Typography>}