fix: nprogress next integration

packages/ui/src/sortable/sortable.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Draggable } from "./draggable";
 import { Sortable } from "./sortable";
 
 const meta: Meta<typeof Sortable> = {
@@ -26,7 +25,9 @@ export const Default: Story = {
       <div className="border ">{item.name}</div>
       // </Draggable>
     ),
-    onChange: (data) => console.log(data.map(({ id }) => id)),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onChange: (data) => console.log(data.map(({ id }: any) => id)),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     keyExtractor: (item: any) => item.id,
   },
 };

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",

yarn.lock

@@ -4533,7 +4533,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.2.48", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48":
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48":
   version "18.2.48"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
   integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==
@@ -9932,6 +9932,13 @@ neo-async@^2.5.0, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-nprogress-bar@^2.3.12:
+  version "2.3.12"
+  resolved "https://registry.yarnpkg.com/next-nprogress-bar/-/next-nprogress-bar-2.3.12.tgz#ecc8426946d7635cfb60e22b2dc71d8b6d91a6b4"
+  integrity sha512-BCsmNmssPY4QfYKux7cGYm/JmsM/n9TGMJJDyYPt7ckWyK8l43hMgi7g9d7u/IxCaEAx3pbzfg7Ity0zdlDnGA==
+  dependencies:
+    nprogress "^0.2.0"
+
 next-pwa@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/next-pwa/-/next-pwa-5.6.0.tgz#f7b1960c4fdd7be4253eb9b41b612ac773392bf4"