simple navigation indicator

Author: conico974

packages/gitbook/src/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { getSpaceLanguage, t } from '@/intl/server';
 import { tcls } from '@/lib/tailwind';
 import { SearchContainer } from '../Search';
 import { SiteSectionTabs, encodeClientSiteSections } from '../SiteSections';
+import { NavigationLoader } from '../SpaceLayout/NavigationLoader';
 import { HeaderLink } from './HeaderLink';
 import { HeaderLinkMore } from './HeaderLinkMore';
 import { HeaderLinks } from './HeaderLinks';
@@ -201,6 +202,7 @@ export function Header(props: {
                     </div>
                 </div>
             ) : null}
+            <NavigationLoader />
         </header>
     );
 }

packages/gitbook/src/components/SpaceLayout/NavigationLoader.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { tcls } from '@/lib/tailwind';
+import { useIsNavigating } from '../hooks';
+
+export function NavigationLoader() {
+    const isNavigating = useIsNavigating();
+    if (!isNavigating) {
+        return null;
+    }
+    return (
+        <div
+            className={tcls(
+                'w-full',
+                'h-1',
+                'relative',
+                'inline-block',
+                'overflow-hidden',
+                'bg-info'
+            )}
+        >
+            <span
+                className={tcls(
+                    'w-24',
+                    'h-1',
+                    'absolute',
+                    'bg-primary-original',
+                    'top-0',
+                    'left-0',
+                    'box-border',
+                    'rounded-md',
+                    'animate-progress-loader'
+                )}
+            />
+        </div>
+    );
+}

packages/gitbook/src/components/hooks/useHash.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { usePathname } from 'next/navigation';
 import React from 'react';
 
 export const HashContext = React.createContext<{
@@ -9,9 +10,17 @@ export const HashContext = React.createContext<{
      * URL can be relative or absolute.
      */
     updateHashFromUrl: (href: string) => void;
+    /**
+     * Indicates if a link has been clicked recently.
+     * Becomes true after a click and resets to false when pathname changes.
+     * It is debounced to avoid flickering on fast navigations.
+     * Debounce time is 400ms (= doherty threshold for responsiveness).
+     */
+    isNavigating: boolean;
 }>({
     hash: null,
     updateHashFromUrl: () => {},
+    isNavigating: false,
 });
 
 function getHash(): string | null {
@@ -21,32 +30,74 @@ function getHash(): string | null {
     return window.location.hash.slice(1);
 }
 
-export const HashProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+export const HashProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
     const [hash, setHash] = React.useState<string | null>(getHash);
+    const [isNavigating, setIsNavigating] = React.useState(false);
+    const timeoutRef = React.useRef<number | null>(null);
+    const pathname = usePathname();
+    const pathnameRef = React.useRef(pathname);
+
+    // Reset isNavigating when pathname changes
+    React.useEffect(() => {
+        if (pathnameRef.current !== pathname) {
+            setIsNavigating(false);
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+            pathnameRef.current = pathname;
+        }
+    }, [pathname]);
+
+    // Cleanup timeout on unmount
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
     const updateHashFromUrl = React.useCallback((href: string) => {
         const url = new URL(
             href,
             typeof window !== 'undefined' ? window.location.origin : 'http://localhost'
         );
         setHash(url.hash.slice(1));
+
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (pathnameRef.current !== url.pathname) {
+            timeoutRef.current = window.setTimeout(() => {
+                setIsNavigating(true);
+                timeoutRef.current = null;
+                return;
+            }, 400); // 400ms timeout - doherty threshold for responsiveness
+        }
     }, []);
+
     const memoizedValue = React.useMemo(
-        () => ({ hash, updateHashFromUrl }),
-        [hash, updateHashFromUrl]
+        () => ({ hash, updateHashFromUrl, isNavigating }),
+        [hash, updateHashFromUrl, isNavigating]
     );
     return <HashContext.Provider value={memoizedValue}>{children}</HashContext.Provider>;
 };
 
 /**
- * Hook to get the current hash from the URL.
+ * Hook to get the current hash from the URL and click state.
  * @see https://github.com/vercel/next.js/discussions/49465
  * We use a different hack than this one, because for same page link it don't work
  * We can't use the `hashChange` event because it doesn't fire for `replaceState` and `pushState` which are used by Next.js.
  * Since we have a single Link component that handles all links, we can use a context to share the hash.
  */
 export function useHash() {
-    // const params = useParams();
     const { hash } = React.useContext(HashContext);
 
     return hash;
 }
+
+export function useIsNavigating() {
+    const { isNavigating: hasBeenClicked } = React.useContext(HashContext);
+    return hasBeenClicked;
+}

packages/gitbook/tailwind.config.ts

@@ -326,6 +326,7 @@ const config: Config = {
                 exitToRight: 'exitToRight 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
 
                 heightIn: 'heightIn 200ms ease both',
+                progressLoader: 'progressLoader 1.5s ease-in-out infinite alternate',
             },
             keyframes: {
                 bounceSmall: {
@@ -495,6 +496,10 @@ const config: Config = {
                     from: { height: '0' },
                     to: { height: 'max-content' },
                 },
+                progressLoader: {
+                    from: { transform: 'translateX(-1%)', left: 0 },
+                    to: { transform: 'translateX(-99%)', left: '100%' },
+                },
             },
             boxShadow: {
                 thinbottom: '0px 1px 0px rgba(0, 0, 0, 0.05)',