From 347d95709c55edef6497c2537f23f7bb1324d0b1 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Sun, 26 Apr 2026 22:09:49 +0300
Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?=
 =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?=
 =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=B6=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=87=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D0=BB=D0=BE=D1=83=D0=B4=D0=B5=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core/components/common/logo-spinner.tsx   |  11 +-
 .../common/nodedc-processing-loader.tsx       |  14 +-
 .../core/lib/b-progress/AppProgressBar.tsx    | 148 +-----------------
 plane-src/apps/web/styles/globals.css         |  88 -----------
 4 files changed, 13 insertions(+), 248 deletions(-)

diff --git a/plane-src/apps/web/core/components/common/logo-spinner.tsx b/plane-src/apps/web/core/components/common/logo-spinner.tsx
index 1c80f6f..9dfad1d 100644
--- a/plane-src/apps/web/core/components/common/logo-spinner.tsx
+++ b/plane-src/apps/web/core/components/common/logo-spinner.tsx
@@ -4,12 +4,19 @@
  * See the LICENSE file for details.
  */
 
-import { NodedcProcessingLoader } from "./nodedc-processing-loader";
+import { useTheme } from "next-themes";
+// assets
+import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
+import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
 
 export function LogoSpinner() {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
   return (
     <div className="flex items-center justify-center">
-      <NodedcProcessingLoader tone="white" variant="fluid" />
+      <img src={logoSrc} alt="logo" className="h-6 w-auto object-contain sm:h-11" />
     </div>
   );
 }
diff --git a/plane-src/apps/web/core/components/common/nodedc-processing-loader.tsx b/plane-src/apps/web/core/components/common/nodedc-processing-loader.tsx
index c6b6de3..a3a5df2 100644
--- a/plane-src/apps/web/core/components/common/nodedc-processing-loader.tsx
+++ b/plane-src/apps/web/core/components/common/nodedc-processing-loader.tsx
@@ -4,23 +4,13 @@ type TNodedcProcessingLoaderProps = {
   className?: string;
   label?: string;
   tone?: "accent" | "white";
-  variant?: "orbit" | "fluid";
 };
 
-export function NodedcProcessingLoader({
-  className,
-  label,
-  tone = "accent",
-  variant = "orbit",
-}: TNodedcProcessingLoaderProps) {
+export function NodedcProcessingLoader({ className, label, tone = "accent" }: TNodedcProcessingLoaderProps) {
   return (
     <div className={cn("flex flex-col items-center justify-center gap-5 text-center", className)}>
       <span
-        className={cn(
-          "nodedc-processing-loader",
-          variant === "fluid" && "nodedc-processing-loader-fluid",
-          tone === "white" && "nodedc-processing-loader-white"
-        )}
+        className={cn("nodedc-processing-loader", tone === "white" && "nodedc-processing-loader-white")}
         aria-hidden="true"
       />
       {label && <div className="text-18 font-semibold text-primary">{label}</div>}
diff --git a/plane-src/apps/web/core/lib/b-progress/AppProgressBar.tsx b/plane-src/apps/web/core/lib/b-progress/AppProgressBar.tsx
index e02c31a..c408373 100644
--- a/plane-src/apps/web/core/lib/b-progress/AppProgressBar.tsx
+++ b/plane-src/apps/web/core/lib/b-progress/AppProgressBar.tsx
@@ -4,150 +4,6 @@
  * See the LICENSE file for details.
  */
 
-import { useEffect, useRef, useState } from "react";
-import { BProgress } from "@bprogress/core";
-import { useNavigation } from "react-router";
-import { NodedcProcessingLoader } from "@/components/common/nodedc-processing-loader";
-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,
-} 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 default function AppProgressBar() {
-  const navigation = useNavigation();
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const startedRef = useRef<boolean>(false);
-  const [isLoaderVisible, setIsLoaderVisible] = useState(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;
-      }
-      setIsLoaderVisible(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;
-          }
-          setIsLoaderVisible(true);
-          timerRef.current = null;
-        }, PROGRESS_CONFIG.delay);
-      }
-    }
-
-    return () => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, [navigation.state]);
-
-  if (!isLoaderVisible) return null;
-
-  return (
-    <div className="pointer-events-none fixed inset-0 z-[9999] grid place-items-center bg-black/10 backdrop-blur-[1.5px]">
-      <NodedcProcessingLoader tone="white" variant="fluid" />
-    </div>
-  );
+export default function AppProgressBar(): null {
+  return null;
 }
diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css
index bbbe717..9173377 100644
--- a/plane-src/apps/web/styles/globals.css
+++ b/plane-src/apps/web/styles/globals.css
@@ -4006,92 +4006,4 @@
     }
   }
 
-  .nodedc-processing-loader-fluid {
-    width: 5rem;
-    aspect-ratio: 1;
-    padding: 0.625rem;
-    box-sizing: border-box;
-    display: grid;
-    background: transparent;
-    filter: blur(5px) contrast(15);
-    mix-blend-mode: screen;
-  }
-
-  .nodedc-processing-loader-fluid::before,
-  .nodedc-processing-loader-fluid::after {
-    content: "";
-    position: static;
-    grid-area: 1 / 1;
-    display: block;
-    width: auto;
-    height: auto;
-    margin: 0.3125rem;
-    border: 0;
-    border-radius: 9999px;
-    background: currentColor;
-    box-shadow: none;
-    offset-path: none;
-    -webkit-mask-size: 100% 20px, 100% 100%;
-    mask-size: 100% 20px, 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-composite: destination-out;
-    mask-composite: exclude;
-  }
-
-  .nodedc-processing-loader-fluid::before {
-    -webkit-mask-image:
-      linear-gradient(#000 0 0),
-      linear-gradient(#000 0 0);
-    mask-image:
-      linear-gradient(#000 0 0),
-      linear-gradient(#000 0 0);
-    animation: nodedc-processing-fluid-shape 2s infinite;
-  }
-
-  .nodedc-processing-loader-fluid::after {
-    -webkit-mask-image: linear-gradient(#000 0 0);
-    mask-image: linear-gradient(#000 0 0);
-    animation:
-      nodedc-processing-fluid-shape 2s infinite,
-      nodedc-processing-fluid-jitter 0.5s infinite cubic-bezier(0.5, 200, 0.5, -200);
-  }
-
-  @keyframes nodedc-processing-fluid-shape {
-    0% {
-      -webkit-mask-position: 0 20%, 0 0;
-      mask-position: 0 20%, 0 0;
-    }
-
-    20% {
-      -webkit-mask-position: 0 80%, 0 0;
-      mask-position: 0 80%, 0 0;
-    }
-
-    40% {
-      -webkit-mask-position: 0 100%, 0 0;
-      mask-position: 0 100%, 0 0;
-    }
-
-    60% {
-      -webkit-mask-position: 0 0%, 0 0;
-      mask-position: 0 0%, 0 0;
-    }
-
-    80% {
-      -webkit-mask-position: 0 35%, 0 0;
-      mask-position: 0 35%, 0 0;
-    }
-
-    100% {
-      -webkit-mask-position: 0 0, 0 0;
-      mask-position: 0 0, 0 0;
-    }
-  }
-
-  @keyframes nodedc-processing-fluid-jitter {
-    100% {
-      transform: translate(0.1px);
-    }
-  }
 }