feat: use Vercel Speed Insights (#1470)

* feat: install `@vercel/speed-insights`

* feat: add the `SpeedInsights` component to `_app.tsx` & `layout.tsx`

package.json

@@ -66,6 +66,7 @@
     "@tanstack/react-table": "^8.13.2",
     "@tanstack/react-virtual": "^3.5.0",
     "@vercel/kv": "^1.0.1",
+    "@vercel/speed-insights": "^1.0.12",
     "@visx/curve": "^3.3.0",
     "@visx/xychart": "^3.10.2",
     "@web3inbox/core": "^1.1.0",

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { dystopian, inter } from "fonts"
 import { type ReactNode, Suspense } from "react"
 import "./globals.css"
 import { cn } from "@/lib/utils"
+import { SpeedInsights } from "@vercel/speed-insights/next"
 import type { Metadata, Viewport } from "next"
 import NextTopLoader from "nextjs-toploader"
 
@@ -56,6 +57,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
             pointerEvents: "none",
           }}
         />
+
+        <SpeedInsights />
       </body>
     </html>
   )

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import { FuelProvider } from "@fuels/react"
 import { IconContext } from "@phosphor-icons/react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { SpeedInsights } from "@vercel/speed-insights/next"
 import { bugsnagStart } from "bugsnag"
 import Chakra from "components/_app/Chakra"
 import ClientOnly from "components/common/ClientOnly"
@@ -101,6 +102,8 @@ const App = ({
           </IconContext.Provider>
         </TooltipProvider>
       </Chakra>
+
+      <SpeedInsights />
     </>
   )
 }