Improve animation of section tabs

Author: BrettJephson

packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx

@@ -8,7 +8,7 @@ import { tcls } from '@/lib/tailwind';
 import { Button, Link } from '../primitives';
 
 /**
- * A set of tabs representing site sections for multi-section sites
+ * A set of navigational tabs representing site sections for multi-section sites
  */
 export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteSection }) {
     const { sections, section: currentSection } = props;
@@ -22,34 +22,36 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
     const currentTabRef = React.useRef<HTMLAnchorElement>(null);
     const navRef = React.useRef<HTMLDivElement>(null);
 
-    const [currentIndex, setCurrentIndex] = React.useState(
-        sections.findIndex((section) => section.id === currentSection?.id),
-    );
+    // we don't set the current tab with a click event because the tab will navigate to a different section and trigger a page reload. 
+    const currentIndex = sections.findIndex((section) => section.id === currentSection?.id); 
+
     const [tabDimensions, setTabDimensions] = React.useState<{
         left: number;
         width: number;
     } | null>(null);
 
-    React.useEffect(() => {
+    const updateTabDimensions = React.useCallback(() => {
         if (currentTabRef.current && navRef.current) {
             const rect = currentTabRef.current.getBoundingClientRect();
             const navRect = navRef.current.getBoundingClientRect();
             setTabDimensions({ left: rect.left - navRect.left, width: rect.width });
         }
-    }, [currentIndex]);
+    }, []);
+
+    React.useEffect(() => {
+        updateTabDimensions();
+    }, [currentIndex, updateTabDimensions]);
 
     React.useLayoutEffect(() => {
-        function onResize() {
-            if (currentTabRef.current && navRef.current) {
-                const rect = currentTabRef.current.getBoundingClientRect();
-                const navRect = navRef.current.getBoundingClientRect();
-                setTabDimensions({ left: rect.left - navRect.left, width: rect.width });
-            }
+        window.addEventListener('load', updateTabDimensions);
+        window.addEventListener('resize', updateTabDimensions);
+        () => {
+            window.removeEventListener('resize', updateTabDimensions);
+            window.removeEventListener('load', updateTabDimensions);
         }
-        window.addEventListener('resize', onResize);
-        () => window.removeEventListener('resize', onResize);
-    }, []);
+    }, [updateTabDimensions]);
 
+    const opacity = Boolean(tabDimensions) ? 1 : 0.0;
     const scale = (tabDimensions?.width ?? 0) * 0.01;
     const startPos = `${tabDimensions?.left ?? 0}px`;
 
@@ -62,6 +64,7 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
             className="flex flex-nowrap items-center max-w-screen mb-px"
             style={
                 {
+                    '--tab-opacity': `${opacity}`,
                     '--tab-scale': `${scale}`,
                     '--tab-start': `${startPos}`,
                 } as React.CSSProperties
@@ -80,9 +83,12 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
                     'after:absolute',
                     'after:-bottom-px',
                     'after:left-0',
+                    'after:opacity-[--tab-opacity]',
                     'after:scale-x-[--tab-scale]',
-                    'after:transition-transform',
+                    'after:transition-all',
+                    'after:motion-reduce:transition-none',
                     'after:translate-x-[var(--tab-start)]',
+                    'after:will-change-transform',
                     'after:h-0.5',
                     'after:w-[100px]',
                     'after:bg-primary',
@@ -97,7 +103,6 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
                         label={tab.label}
                         href={tab.path}
                         ref={currentIndex === index ? currentTabRef : null}
-                        onClick={() => setCurrentIndex(index)}
                     />
                 ))}
             </div>
@@ -111,9 +116,9 @@ export function SiteSectionTabs(props: { sections: SiteSection[]; section: SiteS
  */
 const Tab = React.forwardRef<
     HTMLSpanElement,
-    { active: boolean; href: string; label: string; onClick?: () => void }
+    { active: boolean; href: string; label: string; }
 >(function Tab(props, ref) {
-    const { active, href, label, onClick } = props;
+    const { active, href, label } = props;
     return (
         <Link
             className={tcls(
@@ -124,7 +129,6 @@ const Tab = React.forwardRef<
             )}
             role="tab"
             href={href}
-            onClick={onClick}
         >
             <span ref={ref} className={tcls('inline-flex w-full truncate')}>
                 {label}