diff --git a/web-app/package.json b/web-app/package.json index e164abc6c..154bfb146 100644 --- 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 index 7bd5101da..8b81b5bcc 100644 --- a/web-app/public/index.html +++ b/web-app/public/index.html @@ -1,14 +1,37 @@ - + + + + + + - + - - - - Mobility Database diff --git a/web-app/src/app/App.css b/web-app/src/app/App.css index 9cc9b3fd1..cd50098d0 100644 --- 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 index a0327f055..13b6d333c 100644 --- 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 { -
- - -
- {isAppReady ? : null} - - -
-
+ + {isAppReady ? : null} + diff --git a/web-app/src/app/AppContainer.tsx b/web-app/src/app/AppContainer.tsx new file mode 100644 index 000000000..f8384a56b --- /dev/null +++ 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 = ({ children }) => { + const isAppLoading = useSelector(selectLoadingApp); + const location = useLocation(); + + React.useLayoutEffect(() => { + window.scrollTo({ top: 0, left: 0, behavior: 'instant' }); + }, [location.pathname]); + + return ( + +
+ {isAppLoading ? ( + + + + ) : ( + children + )} +