Skip to content

Commit

Permalink
Better handling on Lazy & Suspense
Browse files Browse the repository at this point in the history
  • Loading branch information
@chunlaw
chunlaw committed Mar 24, 2024
1 parent 7f9b728 commit 80a4ae0
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 62 deletions.
3 changes: 1 addition & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"react-leaflet": "^4.2.1",
"react-markdown": "^8.0.7",
"react-plotly.js": "^2.6.0",
"react-router-dom": "^6.22.2",
"react-router-dom": "^6.22.3",
"react-select": "^5.3.2",
"react-swipeable-views": "^0.14.0",
"react-virtualized-auto-sizer": "^1.0.24",
Expand Down Expand Up @@ -78,7 +78,6 @@
"@types/react-i18next": "^8.1.0",
"@types/react-leaflet": "^3.0.0",
"@types/react-plotly.js": "^2.6.3",
"@types/react-router-dom": "^5.3.3",
"@types/react-swipeable-views": "^0.13.5",
"@types/react-swipeable-views-utils": "^0.13.3",
"@types/react-virtualized-auto-sizer": "^1.0.4",
Expand Down
125 changes: 110 additions & 15 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { Suspense } from "react";
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { PaletteMode } from "@mui/material";
Expand Down Expand Up @@ -63,27 +63,122 @@ const App = () => {
<Route path="/:lang" element={<Root />}>
<Route
path={`collections/:collectionName`}
element={<Home />}
element={
<Suspense fallback={null}>
<Home />
</Suspense>
}
/>
<Route
path={`route/:id/:panel?`}
element={
<Suspense fallback={null}>
<RouteEta />
</Suspense>
}
/>
<Route
path={`settings`}
element={
<Suspense fallback={null}>
<Settings />
</Suspense>
}
/>
<Route
path={"notice"}
element={
<Suspense fallback={null}>
<Notice />
</Suspense>
}
/>
<Route
path={`import/:data?`}
element={
<Suspense fallback={null}>
<DataImport />
</Suspense>
}
/>
<Route
path={`export`}
element={
<Suspense fallback={null}>
<DataExport />
</Suspense>
}
/>
<Route
path={`board`}
element={
<Suspense fallback={null}>
<RouteBoard />
</Suspense>
}
/>
<Route
path={`stops`}
element={
<Suspense fallback={null}>
<BookmarkedStop />
</Suspense>
}
/>
<Route
path={`search`}
element={
<Suspense fallback={null}>
<RouteSearch />
</Suspense>
}
/>
<Route
path="emotion/:tab?"
element={
<Suspense fallback={null}>
<EmotionPage />
</Suspense>
}
/>
<Route
path={`privacy`}
element={
<Suspense fallback={null}>
<PrivacyPolicy />
</Suspense>
}
/>
<Route
path={`terms`}
element={
<Suspense fallback={null}>
<TermsAndConditions />
</Suspense>
}
/>
<Route
path={`support`}
element={
<Suspense fallback={null}>
<Support />
</Suspense>
}
/>
<Route path={`route/:id/:panel?`} element={<RouteEta />} />
<Route path={`settings`} element={<Settings />} />
<Route path={"notice"} element={<Notice />} />
<Route path={`import/:data?`} element={<DataImport />} />
<Route path={`export`} element={<DataExport />} />
<Route path={`board`} element={<RouteBoard />} />
<Route path={`stops`} element={<BookmarkedStop />} />
<Route path={`search`} element={<RouteSearch />} />
<Route path="emotion/:tab?" element={<EmotionPage />} />
<Route path={`privacy`} element={<PrivacyPolicy />} />
<Route path={`terms`} element={<TermsAndConditions />} />
<Route path={`support`} element={<Support />} />
<Route
path={"patreon"}
element={
<RedirectPage url="https://www.patreon.com/hkbus" />
}
/>
<Route path={``} element={<Home />} />
<Route
path={``}
element={
<Suspense fallback={null}>
<Home />
</Suspense>
}
/>
</Route>
<Route
path="/android"
Expand Down
19 changes: 11 additions & 8 deletions src/pages/RouteEta.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, {
useContext,
useMemo,
useCallback,
Suspense,
} from "react";
import { useParams, useNavigate } from "react-router-dom";
import RouteHeader from "../components/route-eta/RouteHeader";
Expand Down Expand Up @@ -217,14 +218,16 @@ const RouteEta = () => {
<input hidden id={id} />
<RouteHeader routeId={routeId} />
{!energyMode && navigator.userAgent !== "prerendering" && (
<RouteMap
routeId={routeId}
stopIds={stopIds}
stopIdx={stopIdx}
route={route}
companies={co}
onMarkerClick={onMarkerClick}
/>
<Suspense fallback={null}>
<RouteMap
routeId={routeId}
stopIds={stopIds}
stopIdx={stopIdx}
route={route}
companies={co}
onMarkerClick={onMarkerClick}
/>
</Suspense>
)}
<StopAccordionList
routeId={routeId}
Expand Down
52 changes: 15 additions & 37 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1649,10 +1649,10 @@
resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==

"@remix-run/[email protected].2":
version "1.15.2"
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.2.tgz#35726510d332ba5349c6398d13259d5da184553d"
integrity sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==
"@remix-run/[email protected].3":
version "1.15.3"
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.3.tgz#d2509048d69dbb72d5389a14945339f1430b2d3c"
integrity sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==

"@rollup/plugin-babel@^5.2.0":
version "5.3.1"
Expand Down Expand Up @@ -1937,11 +1937,6 @@
dependencies:
"@types/unist" "^2"

"@types/history@^4.7.11":
version "4.7.11"
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==

"@types/hoist-non-react-statics@^3.3.0":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
Expand Down Expand Up @@ -2151,23 +2146,6 @@
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"

"@types/react-router-dom@^5.3.3":
version "5.3.3"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
dependencies:
"@types/history" "^4.7.11"
"@types/react" "*"
"@types/react-router" "*"

"@types/react-router@*":
version "5.1.20"
resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
dependencies:
"@types/history" "^4.7.11"
"@types/react" "*"

"@types/react-swipeable-views-utils@^0.13.3":
version "0.13.4"
resolved "https://registry.yarnpkg.com/@types/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.4.tgz#2a48da267b48467887b146178673f4020dec5b1e"
Expand Down Expand Up @@ -5781,20 +5759,20 @@ react-redux@^7.2.0:
prop-types "^15.7.2"
react-is "^17.0.2"

react-router-dom@^6.22.2:
version "6.22.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.2.tgz#8233968a8a576f3006e5549c80f3527d2598fc9c"
integrity sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==
react-router-dom@^6.22.3:
version "6.22.3"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.3.tgz#9781415667fd1361a475146c5826d9f16752a691"
integrity sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==
dependencies:
"@remix-run/router" "1.15.2"
react-router "6.22.2"
"@remix-run/router" "1.15.3"
react-router "6.22.3"

[email protected].2:
version "6.22.2"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.22.2.tgz#27e77e4c635a5697693b922d131d773451c98a5b"
integrity sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==
[email protected].3:
version "6.22.3"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.22.3.tgz#9d9142f35e08be08c736a2082db5f0c9540a885e"
integrity sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==
dependencies:
"@remix-run/router" "1.15.2"
"@remix-run/router" "1.15.3"

react-select@^5.3.2:
version "5.7.3"
Expand Down

0 comments on commit 80a4ae0

Please sign in to comment.