Skip to content

Commit

Permalink
Merge pull request #2653 from Amsterdam/bugfix/performance-improvement
Browse files Browse the repository at this point in the history
Updated png and lazy loading for better performance
  • Loading branch information
remyvdwereld authored Oct 7, 2024
2 parents f2dc53c + 4dcedd1 commit 178ebda
Show file tree
Hide file tree
Showing 26 changed files with 80 additions and 87 deletions.
56 changes: 17 additions & 39 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,57 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<html lang="nl">
<head>
<meta charset="utf-8" />

<meta name="description" content="Toezicht op pad" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#ffffff" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- Favicon: Use one favicon.ico or a large PNG -->
<link rel="icon" href="%PUBLIC_URL%/favicon-32x32.png" sizes="32x32" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon-180x180.png" sizes="180x180" />

<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="%PUBLIC_URL%/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="%PUBLIC_URL%/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="%PUBLIC_URL%/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="%PUBLIC_URL%/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="%PUBLIC_URL%/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="%PUBLIC_URL%/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="%PUBLIC_URL%/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="%PUBLIC_URL%/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-128x128.png" sizes="128x128" />
<!-- Only necessary meta tags for MS application (if needed) -->
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="%PUBLIC_URL%/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="%PUBLIC_URL%/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="%PUBLIC_URL%/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="%PUBLIC_URL%/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="%PUBLIC_URL%/mstile-310x310.png" />

<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!-- Manifest for PWA -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
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`.
-->
<base href="/">
<!-- Title and Base URL -->
<title>Toezicht op pad</title>
<script type="module" src="src/index"></script></head>
<base href="/" />

<!-- Main entry for Vite React application -->
<script type="module" src="src/index"></script>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

<div id="root">
<p id="chunk-js-loading-failure" style="display:none;">Het lijkt erop dat onderdelen van deze website niet correct kunnen worden geladen. <a href="">Probeer te herladen</a></p>
</div>
Expand All @@ -63,4 +40,5 @@
</script>
</body>
</html>

<script src='/config/env.js'></script>
Binary file removed public/apple-touch-icon-114x114.png
Binary file not shown.
Binary file removed public/apple-touch-icon-120x120.png
Binary file not shown.
Binary file removed public/apple-touch-icon-144x144.png
Binary file not shown.
Binary file removed public/apple-touch-icon-152x152.png
Binary file not shown.
Binary file added public/apple-touch-icon-180x180.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/apple-touch-icon-57x57.png
Binary file not shown.
Binary file removed public/apple-touch-icon-60x60.png
Binary file not shown.
Binary file removed public/apple-touch-icon-72x72.png
Binary file not shown.
Binary file removed public/apple-touch-icon-76x76.png
Binary file not shown.
Binary file removed public/images/background-1.png
Binary file not shown.
Binary file removed public/images/background-2.png
Binary file not shown.
Binary file added public/images/background.webp
Binary file not shown.
6 changes: 4 additions & 2 deletions public/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@
"type": "image/png"
}
],
"start_url": ".",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff"
"background_color": "#ffffff",
"orientation": "portrait"
}
Binary file removed public/mstile-150x150.png
Binary file not shown.
Binary file removed public/mstile-310x150.png
Binary file not shown.
Binary file removed public/mstile-310x310.png
Binary file not shown.
Binary file removed public/mstile-70x70.png
Binary file not shown.
4 changes: 3 additions & 1 deletion src/app/features/cases/routes.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import CaseDetailPage from "./components/pages/CaseDetailPage/CaseDetailPage"
import { lazy } from "react"

const CaseDetailPage = lazy(() => import("./components/pages/CaseDetailPage/CaseDetailPage"))

const routes = {
"/cases/:id": CaseDetailPage
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@ const Grid = styled.div`
const Illustration = styled.div`
max-width: 30em;
flex: auto;
// https://pixabay.com/vectors/amsterdam-netherlands-houses-street-4167026/
background: url('/images/background-2.png') no-repeat bottom;
background: url('/images/background.webp') no-repeat bottom;
background-size: contain;
`

Expand Down
16 changes: 9 additions & 7 deletions src/app/features/itineraries/routes.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import CreateItineraryPage from "./components/pages/create/CreateItineraryPage"
import HomePage from "app/features/shared/components/pages/HomePage"
import ItineraryPage from "./components/pages/itinerary/ItineraryPage"
import ListItinerariesPage from "./components/pages/list/ListItinerariesPage"
import ListTeamSettingsOptionsPage from "./components/pages/list/ListTeamSettingsOptionsPage"
import SearchPage from "./components/pages/search/SearchPage"
import SuggestionsPage from "./components/pages/suggestions/SuggestionsPage"
import { lazy } from "react"

const HomePage = lazy(() => import("app/features/shared/components/pages/HomePage"))
const ItineraryPage = lazy(() => import("./components/pages/itinerary/ItineraryPage"))
const ListItinerariesPage = lazy(() => import("./components/pages/list/ListItinerariesPage"))
const ListTeamSettingsOptionsPage = lazy(() => import("./components/pages/list/ListTeamSettingsOptionsPage"))
const SearchPage = lazy(() => import("./components/pages/search/SearchPage"))
const SuggestionsPage = lazy(() => import("./components/pages/suggestions/SuggestionsPage"))
const CreateItineraryPage = lazy(() => import("./components/pages/create/CreateItineraryPage"))

const routes = {
"/": HomePage,
Expand Down
4 changes: 3 additions & 1 deletion src/app/features/login/routes.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import AuthPage from "./components/pages/login/AuthPage"
import { lazy } from "react"

const AuthPage = lazy(() => import("./components/pages/login/AuthPage"))

const routes = {
"/auth": AuthPage
Expand Down
11 changes: 7 additions & 4 deletions src/app/features/settings/routes.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import TeamSettingsListPage from "./components/pages/TeamSettingsListPage"
import TeamSettingsDaysPage from "./components/pages/TeamSettingsDaysPage"
import DaySettingsPage from "./components/pages/DaySettingsPage"
import CreateDaySettingsPage from "./components/pages/CreateDaySettingsPage"
import { lazy } from "react"

const TeamSettingsListPage = lazy(() => import("./components/pages/TeamSettingsListPage"))
const TeamSettingsDaysPage = lazy(() => import("./components/pages/TeamSettingsDaysPage"))
const DaySettingsPage = lazy(() => import("./components/pages/DaySettingsPage"))
const CreateDaySettingsPage = lazy(() => import("./components/pages/CreateDaySettingsPage"))


const routes = {
"/team-settings": TeamSettingsListPage,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ type Props = {
daySettings?: Components.Schemas.DaySettings
fraudProbability?: string | JSX.Element
href?: string
isSia?: boolean
isVisited?: boolean
notes?: JSX.Element
postalCode: string | JSX.Element
Expand Down
59 changes: 31 additions & 28 deletions src/app/features/shared/routing/Router.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,43 @@
import React from "react"
import React, { Suspense } from "react"
import { Routes, Route } from "react-router-dom"

import routes from "app/config/routes"
import ProtectedRoute from "./components/ProtectedRoute"
import NotFoundPage from "../components/pages/NotFoundPage"
import CenteredSpinner from "app/features/shared/components/atoms/CenteredSpinner/CenteredSpinner"

const allowList = /^\/login|^\/authentication\/|^\/auth/

const Router: React.FC = () => (
<Routes>
{
// Pages that do NOT match the allowList are protected
Object
.entries(routes)
.filter(([ path ]) => !path.match(allowList))
.map(([ path, Page ]) => (
// <ProtectedRoute page={ Page } key={ path } path={ path } />
<Route
key={path}
path={path}
element={<ProtectedRoute page={Page} />}
/>
))
}
{
// Pages that do match the allowList are NOT protected
Object
.entries(routes)
.filter(([ path ]) => path.match(allowList))
.map(([ path, Page ]) => (
// <Page key={ path } path={ path } />
<Route key={path} path={path} element={<Page />} />
))
}
<Route path="*" element={<NotFoundPage />} />
</Routes>
<Suspense fallback={<CenteredSpinner explanation="Even geduld…" size={ 60 }/>}>
<Routes>
{
// Pages that do NOT match the allowList are protected
Object
.entries(routes)
.filter(([ path ]) => !path.match(allowList))
.map(([ path, Page ]) => (
// <ProtectedRoute page={ Page } key={ path } path={ path } />
<Route
key={path}
path={path}
element={<ProtectedRoute page={Page} />}
/>
))
}
{
// Pages that do match the allowList are NOT protected
Object
.entries(routes)
.filter(([ path ]) => path.match(allowList))
.map(([ path, Page ]) => (
// <Page key={ path } path={ path } />
<Route key={path} path={path} element={<Page />} />
))
}
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Suspense>
)

export default Router
7 changes: 5 additions & 2 deletions src/app/features/visits/routes.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import CreateVisitPage from "./components/pages/CreateVisitPage/CreateVisitPage"
import EditVisitPage from "./components/pages/EditVisitPage/EditVisitPage"
import { lazy } from "react"

const CreateVisitPage = lazy(() => import("./components/pages/CreateVisitPage/CreateVisitPage"))
const EditVisitPage = lazy(() => import("./components/pages/EditVisitPage/EditVisitPage"))


const routes = {
"/visit/:itineraryId/:caseId": CreateVisitPage,
Expand Down

0 comments on commit 178ebda

Please sign in to comment.