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
This commit is contained in:
Shahed Nasser
2024-10-02 15:51:02 +00:00
committed by GitHub
parent 5fb9c1f82e
commit 0f6f56e764
38 changed files with 294 additions and 218 deletions
+24 -33
View File
@@ -2,11 +2,8 @@
import {
AnalyticsProvider,
ColorModeProvider,
HooksLoader,
LearningPathProvider,
MobileProvider,
ModalProvider,
NotificationProvider,
PaginationProvider,
ScrollControllerProvider,
@@ -25,36 +22,30 @@ const Providers = ({ children }: ProvidersProps) => {
return (
<AnalyticsProvider writeKey={process.env.NEXT_PUBLIC_SEGMENT_API_KEY}>
<SiteConfigProvider config={config}>
<MobileProvider>
<ColorModeProvider>
<ModalProvider>
<LearningPathProvider
baseUrl={process.env.NEXT_PUBLIC_BASE_PATH || "/resources"}
>
<NotificationProvider>
<ScrollControllerProvider scrollableSelector="#main">
<SidebarProvider>
<PaginationProvider>
<MainNavProvider>
<SearchProvider>
<HooksLoader
options={{
pageScrollManager: true,
currentLearningPath: true,
}}
>
{children}
</HooksLoader>
</SearchProvider>
</MainNavProvider>
</PaginationProvider>
</SidebarProvider>
</ScrollControllerProvider>
</NotificationProvider>
</LearningPathProvider>
</ModalProvider>
</ColorModeProvider>
</MobileProvider>
<LearningPathProvider
baseUrl={process.env.NEXT_PUBLIC_BASE_PATH || "/resources"}
>
<NotificationProvider>
<ScrollControllerProvider scrollableSelector="#main">
<SidebarProvider>
<PaginationProvider>
<MainNavProvider>
<SearchProvider>
<HooksLoader
options={{
pageScrollManager: true,
currentLearningPath: true,
}}
>
{children}
</HooksLoader>
</SearchProvider>
</MainNavProvider>
</PaginationProvider>
</SidebarProvider>
</ScrollControllerProvider>
</NotificationProvider>
</LearningPathProvider>
</SiteConfigProvider>
</AnalyticsProvider>
)
+1 -1
View File
@@ -17,7 +17,7 @@ type MainNavProviderProps = {
}
export const MainNavProvider = ({ children }: MainNavProviderProps) => {
const isBrowser = useIsBrowser()
const { isBrowser } = useIsBrowser()
const pathname = usePathname()
const navigationDropdownItems = useMemo(
() =>