docs: generate + configure js sdk reference (#9714)

Manually generate the JS SDK reference + add it to the sidebar

www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx

@@ -28,6 +28,7 @@ export const SidebarItemCategory = ({
     updatePersistedCategoryState,
     getPersistedCategoryState,
     persistState,
+    activePath,
   } = useSidebar()
   const itemShowLoading = useMemo(() => {
     return !item.loaded || (item.showLoadingIfEmpty && !item.children?.length)
@@ -47,6 +48,7 @@ export const SidebarItemCategory = ({
 
   useEffect(() => {
     const isActive = isChildrenActive(item)
+
     if (isActive && !open) {
       setOpen(true)
     }

www/packages/docs-ui/src/components/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useMemo, useRef } from "react"
+import React, { Suspense, useMemo, useRef } from "react"
 import { useSidebar } from "@/providers"
 import clsx from "clsx"
 import { Loading } from "@/components"
@@ -142,12 +142,24 @@ export const Sidebar = ({
                         ? `${item.path}-${index}`
                         : `${item.title}-${index}`
                     return (
-                      <SidebarItem
-                        item={item}
+                      <Suspense
+                        fallback={
+                          <Loading
+                            count={1}
+                            className="!mb-0 !px-docs_0.5"
+                            barClassName="h-[20px]"
+                          />
+                        }
                         key={itemKey}
-                        expandItems={expandItems}
-                        hasNextItems={index !== sidebarItems.default.length - 1}
-                      />
+                      >
+                        <SidebarItem
+                          item={item}
+                          expandItems={expandItems}
+                          hasNextItems={
+                            index !== sidebarItems.default.length - 1
+                          }
+                        />
+                      </Suspense>
                     )
                   })}
                 </div>