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/apps/api-reference/providers/index.tsx

@@ -2,9 +2,6 @@
 
 import {
   AnalyticsProvider,
-  ColorModeProvider,
-  MobileProvider,
-  ModalProvider,
   PageLoadingProvider,
   ScrollControllerProvider,
   SiteConfigProvider,
@@ -24,21 +21,15 @@ const Providers = ({ children }: ProvidersProps) => {
     <AnalyticsProvider writeKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}>
       <SiteConfigProvider config={config}>
         <PageLoadingProvider>
-          <ModalProvider>
-            <ColorModeProvider>
-              <BaseSpecsProvider>
-                <ScrollControllerProvider scrollableSelector="#main">
-                  <SidebarProvider>
-                    <MainNavProvider>
-                      <SearchProvider>
-                        <MobileProvider>{children}</MobileProvider>
-                      </SearchProvider>
-                    </MainNavProvider>
-                  </SidebarProvider>
-                </ScrollControllerProvider>
-              </BaseSpecsProvider>
-            </ColorModeProvider>
-          </ModalProvider>
+          <BaseSpecsProvider>
+            <ScrollControllerProvider scrollableSelector="#main">
+              <SidebarProvider>
+                <MainNavProvider>
+                  <SearchProvider>{children}</SearchProvider>
+                </MainNavProvider>
+              </SidebarProvider>
+            </ScrollControllerProvider>
+          </BaseSpecsProvider>
         </PageLoadingProvider>
       </SiteConfigProvider>
     </AnalyticsProvider>

www/apps/api-reference/providers/main-nav.tsx

@@ -16,7 +16,7 @@ type MainNavProviderProps = {
 }
 
 export const MainNavProvider = ({ children }: MainNavProviderProps) => {
-  const isBrowser = useIsBrowser()
+  const { isBrowser } = useIsBrowser()
   const pathname = usePathname()
   const navigationDropdownItems = useMemo(
     () =>

www/apps/api-reference/providers/page-title.tsx

@@ -12,7 +12,7 @@ type PageTitleProviderProps = {
 }
 
 const PageTitleProvider = ({ children }: PageTitleProviderProps) => {
-  const { activePath, getActiveItem } = useSidebar()
+  const { activePath, activeItem } = useSidebar()
   const { area } = useArea()
 
   useEffect(() => {
@@ -21,7 +21,6 @@ const PageTitleProvider = ({ children }: PageTitleProviderProps) => {
     if (!activePath?.length) {
       document.title = titleSuffix
     } else {
-      const activeItem = getActiveItem()
       if (activeItem?.path === activePath) {
         document.title = `${activeItem?.title} - ${titleSuffix}`
       } else {
@@ -34,7 +33,7 @@ const PageTitleProvider = ({ children }: PageTitleProviderProps) => {
         }
       }
     }
-  }, [activePath, area, getActiveItem])
+  }, [activePath, area, activeItem])
 
   return (
     <PageTitleContext.Provider value={null}>