fix: nprogress next integration

web/app/layout.tsx

@@ -3,7 +3,6 @@ import Script from "next/script";
 // styles
 import "@/styles/globals.css";
 import "@/styles/command-pallette.css";
-import "@/styles/nprogress.css";
 import "@/styles/emoji.css";
 import "@/styles/react-day-picker.css";
 // local

web/app/provider.tsx

@@ -1,10 +1,8 @@
 "use client";
-
 import { FC, ReactNode } from "react";
 import dynamic from "next/dynamic";
-// import Router from "next/navigation";
+import { AppProgressBar } from "next-nprogress-bar";
 import { useTheme, ThemeProvider } from "next-themes";
-import NProgress from "nprogress";
 import { SWRConfig } from "swr";
 // ui
 import { Toast } from "@plane/ui";
@@ -20,11 +18,6 @@ import { InstanceWrapper } from "@/lib/wrappers";
 const StoreWrapper = dynamic(() => import("@/lib/wrappers/store-wrapper"), { ssr: false });
 const PostHogProvider = dynamic(() => import("@/lib/posthog-provider"), { ssr: false });
 const CrispWrapper = dynamic(() => import("@/lib/wrappers/crisp-wrapper"), { ssr: false });
-// nprogress
-NProgress.configure({ showSpinner: false });
-// Router.events.on("routeChangeStart", NProgress.start);
-// Router.events.on("routeChangeError", NProgress.done);
-// Router.events.on("routeChangeComplete", NProgress.done);
 
 export interface IAppProvider {
   children: ReactNode;
@@ -36,6 +29,7 @@ export const AppProvider: FC<IAppProvider> = (props) => {
   const { resolvedTheme } = useTheme();
   return (
     <>
+      <AppProgressBar height="4px" color="#fffd00" options={{ showSpinner: false }} shallowRouting />
       <Toast theme={resolveGeneralTheme(resolvedTheme)} />
       <StoreProvider>
         <ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system">

web/components/issues/issue-layouts/properties/all-properties.tsx

@@ -44,11 +44,6 @@ export interface IIssueProperties {
 }
 
 export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = useParams();
-  const pathname = usePathname();
-
   const { issue, updateIssue, displayProperties, activeLayout, isReadOnly, className } = props;
   // store hooks
   const { getProjectById } = useProject();
@@ -64,7 +59,10 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const { getStateById } = useProjectState();
   const { isMobile } = usePlatformOS();
   const projectDetails = getProjectById(issue.project_id);
-
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = useParams();
+  const pathname = usePathname();
   const currentLayout = `${activeLayout} layout`;
   // derived values
   const stateDetails = getStateById(issue.state_id);

web/package.json

@@ -45,6 +45,7 @@
     "mobx-react": "^9.1.0",
     "mobx-utils": "^6.0.8",
     "next": "^14.2.3",
+    "next-nprogress-bar": "^2.3.12",
     "next-pwa": "^5.6.0",
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",