fix: use ponyfill to ensure to scroll to proper section based on URL …

…hash on mount

use ponyfill to ensure to scroll to proper section based on URL hash on mount,
see https://rb.gy/p3zql

#1183

documentation/helpers/ToC/index.tsx

@@ -1,8 +1,8 @@
 import { cva, cx } from 'class-variance-authority'
 import { useEffect, useState } from 'react'
+import scrollIntoView from 'scroll-into-view-if-needed'
 
 import { useActiveAnchor } from './useActiveAnchor'
-import { usePerformanceObserver } from './usePerformanceObserver'
 import { scrollToAnchor } from './utils'
 
 const itemStyle = cva(['block', 'py-sm', ['hover:bg-[#F2F6FF]']], {
@@ -29,17 +29,21 @@ export const ToC = () => {
     setHeadings([...(document.querySelectorAll<HTMLHeadingElement>('h2, h3') || [])])
   }, [])
 
-  usePerformanceObserver({
-    callback() {
-      const scrollTarget = headings.find(
-        ({ id }) => id === window.top?.location.hash.replace('#', '')
-      )
+  // scroll to the targeted section based on the URL hash on mount
+  useEffect(() => {
+    const scrollTarget = headings.find(
+      ({ id }) => id === window.top?.location.hash.replace('#', '')
+    )
+
+    if (!scrollTarget) return
 
-      scrollTarget?.scrollIntoView({
+    setTimeout(() => {
+      scrollIntoView(scrollTarget, {
+        block: 'start',
         behavior: 'smooth',
       })
-    },
-  })
+    }, 500)
+  }, [headings])
 
   const activeAnchor = useActiveAnchor(headings)
   const activeIndex = headings.findIndex(heading => heading.id === activeAnchor?.id)

package.json

@@ -51,6 +51,7 @@
     "@nx/devkit": "^16.5.3",
     "@nx/eslint-plugin": "^16.5.3",
     "@radix-ui/react-switch": "*",
+    "scroll-into-view-if-needed": "^3.0.10",
     "@spark-ui/cli-utils": "*",
     "@storybook/addon-a11y": "^7.1.1",
     "@storybook/addon-actions": "^7.1.1",