diff options
| -rw-r--r-- | src/App.jsx | 79 |
1 files changed, 48 insertions, 31 deletions
diff --git a/src/App.jsx b/src/App.jsx index 42c3f36..5afcb03 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,10 @@ import { useLocation, Routes, Route, Link } from "react-router-dom"; -import { useState } from "react"; +import { useState, lazy, Suspense } from "react"; import useFetch from "./useFetch"; -import Index from "./pages/Index"; import { DateTime } from "luxon"; import "./App.css"; -import Graph from "./pages/Graph"; +const Index = lazy(() => import("./pages/Index")); +const Graph = lazy(() => import("./pages/Graph")); import { useEffect } from "react"; const App = () => { @@ -12,9 +12,10 @@ const App = () => { let routerLocation = useLocation(); useEffect(() => { - !window.goatcounter ?? window.goatcounter.count({ - path: location.pathname + location.search + location.hash, - }); + !window.goatcounter ?? + window.goatcounter.count({ + path: location.pathname + location.search + location.hash, + }); }, [routerLocation]); const response = useFetch(url); @@ -47,48 +48,64 @@ const App = () => { <Route path="/totalstudents" element={ - <Graph - name={"Total Student Cases"} - response={response} - dataKey={"total_students"} - timeDifference={timeDifference} - /> + <Suspense fallback={null}> + <Graph + name={"Total Student Cases"} + response={response} + dataKey={"total_students"} + timeDifference={timeDifference} + /> + </Suspense> } ></Route> <Route path="/totalstaff" element={ - <Graph - name={"Total Staff Cases"} - response={response} - dataKey={"total_staff"} - timeDifference={timeDifference} - /> + <Suspense fallback={null}> + <Graph + name={"Total Staff Cases"} + response={response} + dataKey={"total_staff"} + timeDifference={timeDifference} + /> + </Suspense> } ></Route> <Route path="/newstudents" element={ - <Graph - name={"New Student Cases"} - response={response} - dataKey={"new_students"} - timeDifference={timeDifference} - /> + <Suspense fallback={null}> + <Graph + name={"New Student Cases"} + response={response} + dataKey={"new_students"} + timeDifference={timeDifference} + /> + </Suspense> } ></Route> <Route path="/newstaff" element={ - <Graph - name={"New Staff Cases"} - response={response} - dataKey={"new_staff"} - timeDifference={timeDifference} - /> + <Suspense fallback={null}> + <Graph + name={"New Staff Cases"} + response={response} + dataKey={"new_staff"} + timeDifference={timeDifference} + /> + </Suspense> } ></Route> - <Route exact path="/" element={<Index response={response} timeDifference={timeDifference} />} /> + <Route + exact + path="/" + element={ + <Suspense fallback={null}> + <Index response={response} timeDifference={timeDifference} /> + </Suspense> + } + /> </Routes> <footer> <p> |