feat: feeds page performance (#824)

* feeds page performance

Author: Alessandro100

web-app/public/assets/MOBILTYDATA_logo_purple_M.webp

@@ -23,9 +23,11 @@ const AppContainer: React.FC<ContextProviderProps> = ({ children }) => {
           <LinearProgress />
         </Box>
       ) : (
-        children
+        <>
+          {children}
+          <Footer />
+        </>
       )}
-      <Footer />
     </Box>
   );
 };

web-app/src/app/AppContainer.tsx

@@ -7,6 +7,7 @@ export interface ContentBoxProps {
   outlineColor: string;
   padding?: Partial<SxProps>;
   margin?: string | number;
+  sx?: SxProps;
 }
 
 export const ContentBox = (
@@ -16,6 +17,7 @@ export const ContentBox = (
     <Box
       width={props.width}
       sx={{
+        ...props.sx,
         background: '#FFFFFF',
         borderRadius: '6px',
         border: `2px solid ${props.outlineColor}`,

web-app/src/app/components/ContentBox.tsx

@@ -3,7 +3,6 @@ import {
   AppBar,
   Box,
   Divider,
-  Avatar,
   Drawer,
   IconButton,
   List,
@@ -70,10 +69,30 @@ const DrawerContent: React.FC<{
           navigateTo('/');
         }}
       >
-        <Avatar src='/assets/MOBILTYDATA_logo_purple_M.png'></Avatar>
+        <picture style={{ display: 'flex' }}>
+          <source
+            media='(min-width: 50px)'
+            srcSet='/assets/MOBILTYDATA_logo_purple_M.webp'
+            width='50'
+            height='50'
+          />
+          <source
+            src='/assets/MOBILTYDATA_logo_purple_M.png'
+            type='image/png'
+          />
+          <img
+            alt='MobilityData logo'
+            src='/assets/MOBILTYDATA_logo_purple_M.png'
+          />
+        </picture>
         <Typography
           variant='h6'
-          sx={{ my: 2, cursor: 'pointer', color: theme.palette.primary.main }}
+          sx={{
+            my: 2,
+            cursor: 'pointer',
+            color: theme.palette.primary.main,
+            fontWeight: 700,
+          }}
           data-testid='websiteTile'
         >
           {websiteTile}
@@ -384,10 +403,22 @@ export default function DrawerAppBar(): React.ReactElement {
               }}
               className='btn-link'
             >
-              <Avatar
-                alt='MobilityData logo'
-                src='/assets/MOBILTYDATA_logo_purple_M.png'
-              ></Avatar>
+              <picture style={{ display: 'flex' }}>
+                <source
+                  media='(min-width: 50px)'
+                  srcSet='/assets/MOBILTYDATA_logo_purple_M.webp'
+                  width='50'
+                  height='50'
+                />
+                <source
+                  src='/assets/MOBILTYDATA_logo_purple_M.png'
+                  type='image/png'
+                />
+                <img
+                  alt='MobilityData logo'
+                  src='/assets/MOBILTYDATA_logo_purple_M.png'
+                />
+              </picture>
               <Typography
                 variant='h5'
                 component='div'

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

@@ -311,12 +311,15 @@ export default function Feed(): React.ReactElement {
           <Skeleton
             animation='wave'
             variant='rectangular'
-            sx={{ width: { xs: '100%', sm: '42%' }, height: '630px' }}
+            sx={{ width: { xs: '100%', sm: '475px' }, height: '630px' }}
           />
           <Skeleton
             animation='wave'
             variant='rectangular'
-            sx={{ width: { xs: '100%', sm: '58%' }, height: '630px' }}
+            sx={{
+              width: { xs: '100%', sm: 'calc(100% - 475px)' },
+              height: '630px',
+            }}
           />
         </Box>
       </Box>,
@@ -487,8 +490,9 @@ export default function Feed(): React.ReactElement {
           >
             {feed?.data_type === 'gtfs' && (
               <ContentBox
+                sx={{ flex: 'none' }}
                 title={t('boundingBoxTitle')}
-                width={{ xs: '100%', md: 'auto' }}
+                width={{ xs: '100%', md: '475px' }}
                 outlineColor={theme.palette.primary.dark}
                 padding={2}
               >

web-app/src/app/screens/Feed/index.tsx

@@ -12,6 +12,7 @@ import {
   Grid,
   InputAdornment,
   Pagination,
+  Skeleton,
   TableContainer,
   TextField,
   Typography,
@@ -293,7 +294,27 @@ export default function Feed(): React.ReactElement {
                 <Grid item xs={12} md={10}>
                   {feedStatus === 'loading' && (
                     <Grid item xs={12}>
-                      <h3>{t('common:loading')}</h3>
+                      <Skeleton
+                        animation='wave'
+                        variant='text'
+                        sx={{ fontSize: '1rem', width: '200px' }}
+                      />
+                      <Skeleton
+                        animation='wave'
+                        variant='text'
+                        sx={{ fontSize: '2rem', width: '100%' }}
+                      />
+                      <Skeleton
+                        animation='wave'
+                        variant='rectangular'
+                        width={'100%'}
+                        height={'1118px'}
+                      />
+                      <Skeleton
+                        animation='wave'
+                        variant='text'
+                        sx={{ fontSize: '2rem', width: '320px' }}
+                      />
                     </Grid>
                   )}