docs: DX and performance improvements in API reference (#9430)

- Improve scroll behavior between active sections
- Improve lag when clicking on a sidebar item
- Refactor internal working of the `SidebarProvider` to find active items faster.
- Use Next.js's `useRouter` hook for changing the hash (since they added the option to disable scroll)
- Change `isBrowser` from a hook to a provider since it's widely used across applications.
- Other general improvements and fixes.

Closes DOCS-952

www/packages/docs-ui/src/hooks/index.ts

@@ -5,7 +5,6 @@ export * from "./use-collapsible-code-lines"
 export * from "./use-copy"
 export * from "./use-current-learning-path"
 export * from "./use-is-external-link"
-export * from "./use-is-browser"
 export * from "./use-keyboard-shortcut"
 export * from "./use-page-scroll-manager"
 export * from "./use-request-runner"

www/packages/docs-ui/src/hooks/use-active-on-scroll/index.tsx

@@ -24,7 +24,7 @@ export const useActiveOnScroll = ({
   const [items, setItems] = useState<ActiveOnScrollItem[]>([])
   const [activeItemId, setActiveItemId] = useState("")
   const { scrollableElement } = useScrollController()
-  const isBrowser = useIsBrowser()
+  const { isBrowser } = useIsBrowser()
   const pathname = usePathname()
   const root = useMemo(() => {
     if (!enable) {
@@ -86,6 +86,8 @@ export const useActiveOnScroll = ({
       return
     }
     const headings = getHeadingsInElm()
+    let selectedHeadingByHash: HTMLHeadingElement | undefined = undefined
+    const hash = location.hash.replace("#", "")
     let closestPositiveHeading: HTMLHeadingElement | undefined = undefined
     let closestNegativeHeading: HTMLHeadingElement | undefined = undefined
     let closestPositiveDistance = Infinity
@@ -97,6 +99,9 @@ export const useActiveOnScroll = ({
       : 0
 
     headings?.forEach((heading) => {
+      if (heading.id === hash) {
+        selectedHeadingByHash = heading as HTMLHeadingElement
+      }
       const headingDistance = heading.getBoundingClientRect().top
 
       if (headingDistance > 0 && headingDistance < closestPositiveDistance) {
@@ -126,6 +131,8 @@ export const useActiveOnScroll = ({
     setActiveItemId(
       chosenClosest
         ? (chosenClosest as HTMLHeadingElement).id
+        : selectedHeadingByHash
+        ? (selectedHeadingByHash as HTMLHeadingElement).id
         : items.length
         ? useDefaultIfNoActive
           ? items[0].heading.id

www/packages/docs-ui/src/hooks/use-click-outside/index.tsx

@@ -12,7 +12,7 @@ export const useClickOutside = ({
   elmRef,
   onClickOutside,
 }: UseClickOutsideProps) => {
-  const isBrowser = useIsBrowser()
+  const { isBrowser } = useIsBrowser()
 
   const checkClickOutside = useCallback(
     (e: MouseEvent) => {

www/packages/docs-ui/src/hooks/use-is-browser/index.ts

@@ -1,13 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-
-export const useIsBrowser = () => {
-  const [isBrowser, setIsBrowser] = useState(false)
-
-  useEffect(() => {
-    setIsBrowser(typeof window !== "undefined")
-  }, [])
-
-  return isBrowser
-}