feat: Add top loader to indicate action (#9150)

Author: HazAT

app/changelog/layout.tsx

@@ -5,6 +5,7 @@ import {ReactNode} from 'react';
 import {Theme} from '@radix-ui/themes';
 import type {Metadata} from 'next';
 import {Rubik} from 'next/font/google';
+import NextTopLoader from 'nextjs-toploader';
 
 import {Navbar} from 'sentry-docs/components/changelog/navbar';
 
@@ -21,7 +22,8 @@ export const metadata: Metadata = {
 export default function ChangelogLayout({children}: {children: ReactNode}) {
   return (
     <Theme accentColor="violet" grayColor="sand" radius="large" scaling="95%">
-      <div className={`${rubik.className} font-sans`}>
+      <NextTopLoader color="#8d5494" />
+      <div className={`${rubik.className}`}>
         <Navbar />
         <div className="bg-gray-100">{children}</div>
         <div className="w-full mx-auto h-16 relative bg-darkPurple">

package.json

@@ -48,6 +48,7 @@
     "next": "14.0.2",
     "next-auth": "^4.24.5",
     "next-mdx-remote": "^4.4.1",
+    "nextjs-toploader": "^1.6.6",
     "platformicons": "^5.9.2",
     "prism-sentry": "^1.0.2",
     "prismjs": "^1.27.0",

yarn.lock

@@ -2487,6 +2487,11 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/nprogress@^0.2.2":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.3.tgz#b2150b054a13622fabcba12cf6f0b54c48b14287"
+  integrity sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==
+
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
@@ -7711,6 +7716,15 @@ [email protected]:
     "@next/swc-win32-ia32-msvc" "14.0.2"
     "@next/swc-win32-x64-msvc" "14.0.2"
 
+nextjs-toploader@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/nextjs-toploader/-/nextjs-toploader-1.6.6.tgz#ee7a332f8fc938ea774f1fac2dd29b54ec81b333"
+  integrity sha512-LKow/aV28/DLhj4yH1E8ydF/I5QDNsb5NqlbsXBaIVFrmZ9/OGHyxPLdumvPE2IOYoQdvJ4XWoaCA1v7aivYBg==
+  dependencies:
+    "@types/nprogress" "^0.2.2"
+    nprogress "^0.2.0"
+    prop-types "^15.8.1"
+
 node-fetch@^2.6.7, node-fetch@^2.6.9:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
@@ -7750,6 +7764,11 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 nth-check@^2.0.0, nth-check@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"