refactor: website toc perf (#868)

* fix: remove visible task

* remove react

* fix(package.json): keep packages to avoid test.cli failing for now

* chore(vite.config):bring back react

---------

Co-authored-by: maiieul <[email protected]>

Author: thejackshelton

apps/website/src/components/toc/toc.tsx

@@ -1,6 +1,6 @@
 import { ContentHeading } from '@builder.io/qwik-city';
 import { cn } from '@qwik-ui/utils';
-import { component$, useSignal, useVisibleTask$, $ } from '@builder.io/qwik';
+import { component$, useSignal, $, useOnWindow } from '@builder.io/qwik';
 
 export const DashboardTableOfContents = component$(
   ({ headings }: { headings: ContentHeading[] }) => {
@@ -122,36 +122,39 @@ const RecursiveList = component$<RecursiveListProps>(
 );
 
 const useActiveItem = (itemIds: string[]) => {
-  const activeId = useSignal<string>('');
-
-  useVisibleTask$(({ cleanup }) => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            activeId.value = entry.target.id;
-          }
-        });
-      },
-      { rootMargin: '0% 0% -85% 0%' },
-    );
-
-    itemIds.forEach((id) => {
-      const element = document.getElementById(id);
-      if (element) {
-        observer.observe(element);
-      }
-    });
+  const activeId = useSignal<string>();
+
+  useOnWindow(
+    'scroll',
+    $(() => {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              activeId.value = entry.target.id;
+            }
+          });
+        },
+        { rootMargin: '0% 0% -85% 0%' },
+      );
 
-    cleanup(() => {
       itemIds.forEach((id) => {
         const element = document.getElementById(id);
         if (element) {
-          observer.unobserve(element);
+          observer.observe(element);
         }
       });
-    });
-  });
+
+      return () => {
+        itemIds.forEach((id) => {
+          const element = document.getElementById(id);
+          if (element) {
+            observer.unobserve(element);
+          }
+        });
+      };
+    }),
+  );
 
   return activeId;
 };

apps/website/src/global.css

@@ -1264,6 +1264,19 @@
     border-left: 1px solid var(--qwikui-slate-300);
   }
 
+  .toc-scrollbar::-webkit-scrollbar-track,
+  .dark .toc-scrollbar::-webkit-scrollbar-track {
+    border-color: transparent;
+  }
+
+  .toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.15);
+  }
+
   .dark *::-webkit-scrollbar-track {
     background: transparent;
     border-left: 1px solid var(--qwikui-slate-800);

apps/website/src/routes/docs/headless/dropdown/index.mdx

@@ -5,7 +5,7 @@ title: Qwik UI | Dropdown
 import { FeatureList } from '~/components/feature-list/feature-list';
 import { statusByComponent } from '~/_state/component-statuses';
 
-<StatusBanner status={statusByComponent.headless.Select} />
+<StatusBanner status={statusByComponent.headless.Dropdown} />
 
 # Dropdown
 

apps/website/src/routes/layout.tsx

@@ -10,12 +10,10 @@ import {
 import { MDXProvider } from '~/_state/MDXProvider';
 import { components } from '~/components/mdx-components';
 import { DashboardTableOfContents } from '~/components/toc/toc';
-import { ScrollArea } from '@qwik-ui/styled';
 import Header from '~/components/header/header';
 
 export default component$(() => {
   const { headings } = useContent();
-
   const { menuItemsGroups } = useKitMenuItems();
 
   return (
@@ -35,12 +33,10 @@ export default component$(() => {
             </main>
           </MDXProvider>
           <div class="mx-6 hidden w-60 min-w-48 text-sm xl:block">
-            <div class="sticky top-16 pt-4">
-              <ScrollArea>
-                <div class="sticky top-16 -mt-10 h-[calc(100vh-64px)] py-12">
-                  <DashboardTableOfContents headings={headings ? headings : []} />
-                </div>
-              </ScrollArea>
+            <div class={`fixed translate-y-[-20px] py-12`}>
+              <div class="toc-scrollbar mb-4 h-[calc(100vh-64px)]  overflow-auto pb-16">
+                <DashboardTableOfContents headings={headings ? headings : []} />
+              </div>
             </div>
           </div>
         </div>

packages/kit-styled/src/components/scroll-area/scroll-area-qwikified.tsx

@@ -19,4 +19,3 @@ export * from './components/skeleton/skeleton';
 export * from './components/tabs/tabs';
 export * from './components/textarea/textarea';
 export * from './components/toggle/toggle';
-export * from './components/scroll-area/scroll-area-qwikified';