Merge pull request #20 from data-miner00/dev2

Minor updates

Author: data-miner00

package.json

@@ -67,13 +67,15 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
+    "@uidotdev/usehooks": "^2.0.1",
     "framer-motion": "^7.10.3",
     "i18next": "^22.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.3.1",
     "react-icons": "^4.10.1",
     "react-router-dom": "^6.14.1",
+    "web-vitals": "^3.4.0",
     "zod": "^3.21.4"
   }
 }

pnpm-lock.yaml

@@ -13,7 +13,7 @@ const About = lazy(async () => await import("./pages/About"));
 const NotFound = lazy(async () => await import("./pages/NotFound"));
 
 const App = (): JSX.Element => (
-  <div>
+  <>
     <Header />
     <ReferencePane />
 
@@ -27,7 +27,7 @@ const App = (): JSX.Element => (
         </Routes>
       </React.Suspense>
     </ErrorBoundary>
-  </div>
+  </>
 );
 
 export default App;

src/App.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter } from "react-router-dom";
 
 import App from "./App";
 import ErrorBoundary from "./components/ErrorBoundary";
+import reportWebVitals from "./reportWebVitals";
 
 import "./i18n";
 
@@ -19,3 +20,6 @@ root.render(
     </ErrorBoundary>
   </React.StrictMode>
 );
+
+// Pass in `console.log` for web vitals reporting
+reportWebVitals();

src/index.tsx

@@ -0,0 +1,17 @@
+import { ReportCallback } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportCallback): void => {
+  if (onPerfEntry != null) {
+    import("web-vitals")
+      .then(({ onCLS, onFCP, onFID, onLCP, onTTFB }) => {
+        onCLS(onPerfEntry);
+        onFID(onPerfEntry);
+        onFCP(onPerfEntry);
+        onLCP(onPerfEntry);
+        onTTFB(onPerfEntry);
+      })
+      .catch(console.error);
+  }
+};
+
+export default reportWebVitals;