update blog page issue

src/components/layout/LoadingScreen.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { usePathname } from "next/navigation";
 import Image from "next/image";
 
 /**
@@ -10,21 +9,20 @@ import Image from "next/image";
  * Native reimplementation of the legacy WordPress page-loader: a black
  * full-screen overlay with a centered, pulsing Doormile logo that fades out.
  *
- * Shows on initial load (until the window finishes loading, min ~450ms to avoid
- * a flash, capped at 2.5s so it never blocks) and again briefly on each route
- * navigation. CWV-safe: fixed/out-of-flow (no layout shift), logo is priority,
- * and it never delays hydration.
+ * Shows only on initial application boot (until the window finishes loading,
+ * min ~450ms to avoid a flash, capped at 2.5s so it never blocks). It must not
+ * reappear during client-side route transitions: Next keeps the current page
+ * visible while the next route payload is prepared, and a global overlay here
+ * would create an artificial black flash between otherwise-ready pages.
  */
 type Phase = "visible" | "hiding" | "gone";
 
 const MIN_SHOW_MS = 450;
 const MAX_SHOW_MS = 2500;
-const NAV_SHOW_MS = 520;
 
 export default function LoadingScreen() {
-  const pathname = usePathname();
   const [phase, setPhase] = useState<Phase>("visible");
-  const isFirstRender = useRef(true);
+  const bootComplete = useRef(false);
 
   // Initial load: hide once the page is ready.
   useEffect(() => {
@@ -33,7 +31,7 @@ export default function LoadingScreen() {
     let fadeTimer: ReturnType<typeof setTimeout>;
 
     const begin = () => {
-      if (began) return;
+      if (began || bootComplete.current) return;
       began = true;
       const wait = Math.max(0, MIN_SHOW_MS - (performance.now() - start));
       fadeTimer = setTimeout(() => setPhase("hiding"), wait);
@@ -52,17 +50,6 @@ export default function LoadingScreen() {
     };
   }, []);
 
-  // Route navigations: flash the loader briefly for an app-like transition.
-  useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-    setPhase("visible");
-    const t = setTimeout(() => setPhase("hiding"), NAV_SHOW_MS);
-    return () => clearTimeout(t);
-  }, [pathname]);
-
   if (phase === "gone") return null;
 
   return (
@@ -72,7 +59,10 @@ export default function LoadingScreen() {
       aria-live="polite"
       aria-label="Loading"
       onTransitionEnd={(e) => {
-        if (e.propertyName === "opacity" && phase === "hiding") setPhase("gone");
+        if (e.propertyName === "opacity" && phase === "hiding") {
+          bootComplete.current = true;
+          setPhase("gone");
+        }
       }}
     >
       <div className="dm-loader__pulse">