[WEB-5040] feat: admin react-router migration (#7922)

apps/admin/core/components/common/logo-spinner.tsx

@@ -1,8 +1,7 @@
 import Image from "next/image";
 import { useTheme } from "next-themes";
-// assets
-import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
-import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
+import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
+import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
 
 export const LogoSpinner = () => {
   const { resolvedTheme } = useTheme();

apps/admin/core/components/instance/failure.tsx

@@ -1,15 +1,14 @@
 "use client";
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/propel/button";
 // assets
 import { AuthHeader } from "@/app/(all)/(home)/auth-header";
-import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
-import InstanceFailureImage from "@/public/instance/instance-failure.svg";
+import InstanceFailureDarkImage from "@/app/assets/instance/instance-failure-dark.svg?url";
+import InstanceFailureImage from "@/app/assets/instance/instance-failure.svg?url";
 
-export const InstanceFailureView: FC = observer(() => {
+export const InstanceFailureView: React.FC = observer(() => {
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;

apps/admin/core/components/instance/instance-not-ready.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import type { FC } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { Button } from "@plane/propel/button";
 // assets
-import PlaneTakeOffImage from "@/public/images/plane-takeoff.png";
+import PlaneTakeOffImage from "@/app/assets/images/plane-takeoff.png?url";
 
-export const InstanceNotReady: FC = () => (
+export const InstanceNotReady: React.FC = () => (
   <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
     <div className="w-auto max-w-2xl relative space-y-8 py-10">
       <div className="relative flex flex-col justify-center items-center space-y-4">

apps/admin/core/components/instance/loading.tsx

@@ -1,8 +1,8 @@
 import Image from "next/image";
 import { useTheme } from "next-themes";
 // assets
-import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
-import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
+import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
+import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
 
 export const InstanceLoading = () => {
   const { resolvedTheme } = useTheme();

apps/admin/core/components/new-user-popup.tsx

@@ -1,24 +1,23 @@
 "use client";
 
-import React from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useTheme as nextUseTheme } from "next-themes";
+import { useTheme as useNextTheme } from "next-themes";
 // ui
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { resolveGeneralTheme } from "@plane/utils";
 // hooks
+import TakeoffIconDark from "@/app/assets/logos/takeoff-icon-dark.svg?url";
+import TakeoffIconLight from "@/app/assets/logos/takeoff-icon-light.svg?url";
 import { useTheme } from "@/hooks/store";
 // icons
-import TakeoffIconLight from "/public/logos/takeoff-icon-light.svg";
-import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
 
-export const NewUserPopup: React.FC = observer(() => {
+export const NewUserPopup = observer(() => {
   // hooks
   const { isNewUserPopup, toggleNewUserPopup } = useTheme();
   // theme
-  const { resolvedTheme } = nextUseTheme();
+  const { resolvedTheme } = useNextTheme();
 
   if (!isNewUserPopup) return <></>;
   return (

apps/admin/core/lib/b-progress/AppProgressBar.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { BProgress } from "@bprogress/core";
+import { useNavigation } from "react-router";
+import "@bprogress/core/css";
+
+/**
+ * Progress bar configuration options
+ */
+interface ProgressConfig {
+  /** Whether to show the loading spinner */
+  showSpinner: boolean;
+  /** Minimum progress percentage (0-1) */
+  minimum: number;
+  /** Animation speed in milliseconds */
+  speed: number;
+  /** Auto-increment speed in milliseconds */
+  trickleSpeed: number;
+  /** CSS easing function */
+  easing: string;
+  /** Enable auto-increment */
+  trickle: boolean;
+  /** Delay before showing progress bar in milliseconds */
+  delay: number;
+  /** Whether to disable the progress bar */
+  isDisabled?: boolean;
+}
+
+/**
+ * Configuration for the progress bar
+ */
+const PROGRESS_CONFIG: Readonly<ProgressConfig> = {
+  showSpinner: false,
+  minimum: 0.1,
+  speed: 400,
+  trickleSpeed: 800,
+  easing: "ease",
+  trickle: true,
+  delay: 0,
+  isDisabled: import.meta.env.PROD, // Disable progress bar in production builds
+} as const;
+
+/**
+ * Navigation Progress Bar Component
+ *
+ * Automatically displays a progress bar at the top of the page during React Router navigation.
+ * Integrates with React Router's useNavigation hook to monitor route changes.
+ *
+ * Note: Progress bar is disabled in production builds.
+ *
+ * @returns null - This component doesn't render any visible elements
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <>
+ *       <AppProgressBar />
+ *       <Outlet />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function AppProgressBar(): null {
+  const navigation = useNavigation();
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const startedRef = useRef<boolean>(false);
+
+  // Initialize BProgress once on mount
+  useEffect(() => {
+    // Skip initialization in production builds
+    if (PROGRESS_CONFIG.isDisabled) {
+      return;
+    }
+
+    // Configure BProgress with our settings
+    BProgress.configure({
+      showSpinner: PROGRESS_CONFIG.showSpinner,
+      minimum: PROGRESS_CONFIG.minimum,
+      speed: PROGRESS_CONFIG.speed,
+      trickleSpeed: PROGRESS_CONFIG.trickleSpeed,
+      easing: PROGRESS_CONFIG.easing,
+      trickle: PROGRESS_CONFIG.trickle,
+    });
+
+    // Render the progress bar element in the DOM
+    BProgress.render(true);
+
+    // Cleanup on unmount
+    return () => {
+      if (BProgress.isStarted()) {
+        BProgress.done();
+      }
+    };
+  }, []);
+
+  // Handle navigation state changes
+  useEffect(() => {
+    // Skip navigation tracking in production builds
+    if (PROGRESS_CONFIG.isDisabled) {
+      return;
+    }
+
+    if (navigation.state === "idle") {
+      // Navigation complete - clear any pending timer
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+
+      // Complete progress if it was started
+      if (startedRef.current) {
+        BProgress.done();
+        startedRef.current = false;
+      }
+    } else {
+      // Navigation in progress (loading or submitting)
+      // Only start if not already started and no timer pending
+      if (timerRef.current === null && !startedRef.current) {
+        timerRef.current = setTimeout((): void => {
+          if (!BProgress.isStarted()) {
+            BProgress.start();
+            startedRef.current = true;
+          }
+          timerRef.current = null;
+        }, PROGRESS_CONFIG.delay);
+      }
+    }
+
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [navigation.state]);
+
+  return null;
+}

apps/admin/core/lib/b-progress/index.tsx

@@ -0,0 +1 @@
+export * from "./AppProgressBar";