perf(docs): only load sidebar paths once

also make it a server$ call

Author: wmertens

packages/docs/src/components/sidebar/sidebar.tsx

@@ -1,11 +1,24 @@
-import { component$, sync$, useContext, useOnDocument, useStyles$ } from '@builder.io/qwik';
-import { type ContentMenu, useContent, useLocation, routeLoader$ } from '@builder.io/qwik-city';
+import {
+  component$,
+  sync$,
+  useComputed$,
+  useContext,
+  useOnDocument,
+  useStyles$,
+} from '@builder.io/qwik';
+import { server$, useContent, useLocation, type ContentMenu } from '@builder.io/qwik-city';
 import { GlobalStore } from '../../context';
 import { CloseIcon } from '../svgs/close-icon';
 import styles from './sidebar.css?inline';
 
-export const useMarkdownItems = routeLoader$(async () => {
-  const rawData = await Promise.all(
+let markdownItems: MarkdownItems | undefined;
+let markdownItemsPromise: Promise<MarkdownItems> | undefined;
+export const getMarkdownItems = server$(() => {
+  if (markdownItems) {
+    return markdownItems;
+  }
+
+  markdownItemsPromise ||= Promise.all(
     Object.entries(import.meta.glob<{ frontmatter?: MDX }>('../../routes/**/*.{md,mdx}')).map(
       async ([k, v]) => {
         return [
@@ -20,20 +33,22 @@ export const useMarkdownItems = routeLoader$(async () => {
         ] as const;
       }
     )
-  );
-  const markdownItems: MarkdownItems = {};
-  rawData.map(([k, v]) => {
-    if (v.frontmatter?.updated_at) {
-      markdownItems[k] = {
-        title: v.frontmatter.title,
-        contributors: v.frontmatter.contributors,
-        created_at: v.frontmatter.created_at,
-        updated_at: v.frontmatter.updated_at,
-      };
-    }
-  });
+  ).then((rawData) => {
+    markdownItems = {};
+    rawData.map(([k, v]) => {
+      if (v.frontmatter?.updated_at) {
+        markdownItems![k] = {
+          title: v.frontmatter.title,
+          contributors: v.frontmatter.contributors,
+          created_at: v.frontmatter.created_at,
+          updated_at: v.frontmatter.updated_at,
+        };
+      }
+    });
 
-  return markdownItems;
+    return markdownItems;
+  });
+  return markdownItemsPromise;
 });
 
 type MarkdownItems = Record<string, MDX>;
@@ -64,7 +79,7 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
   const globalStore = useContext(GlobalStore);
   const { menu } = useContent();
   const { url } = useLocation();
-  const markdownItems = useMarkdownItems();
+  const markdownItems = useComputed$(() => getMarkdownItems());
   const allOpen = url.pathname.startsWith('/qwikcity/') || props.allOpen;
 
   useOnDocument(
@@ -78,7 +93,7 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
           el.scrollTop = savedScroll;
           el.style.visibility = 'visible';
         }
-      } catch (err) {
+      } catch {
         //
       }
     })
@@ -103,7 +118,7 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
             try {
               const scrollTop = document.getElementById('qwik-sidebar')!.scrollTop;
               sessionStorage.setItem('qwik-sidebar', String(scrollTop));
-            } catch (err) {
+            } catch {
               //
             }
           })}

packages/docs/src/routes/community/layout.tsx

@@ -6,8 +6,6 @@ import { OnThisPage } from '../../components/on-this-page/on-this-page';
 import { ContentNav } from '../../components/content-nav/content-nav';
 import styles from '../docs/docs.css?inline';
 
-export { useMarkdownItems } from '../../components/sidebar/sidebar';
-
 export default component$(() => {
   useStyles$(styles);
 

packages/docs/src/routes/docs/layout.tsx

@@ -9,8 +9,6 @@ import { createBreadcrumbs, SideBar } from '../../components/sidebar/sidebar';
 import { GlobalStore } from '../../context';
 import styles from './docs.css?inline';
 
-export { useMarkdownItems } from '../../components/sidebar/sidebar';
-
 export default component$(() => {
   useStyles$(styles);
   const loc = useLocation();