improve website

website/src/components/md/Pre.tsx

@@ -1,17 +1,26 @@
 import { useEffect, useRef } from 'react';
-import { OverlayScrollbars } from 'overlayscrollbars';
+import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
 import type { ComponentProps } from 'react';
 
 export const Pre = ({ children }: ComponentProps<'pre'>) => {
   const ref = useRef(null);
+  const [initialize, instance] = useOverlayScrollbarsIdle({
+    options: {
+      paddingAbsolute: true,
+      scrollbars: { autoHide: 'leave' },
+    },
+  });
+
   useEffect(() => {
     if (ref.current) {
-      const instance = OverlayScrollbars(ref.current, {
-        paddingAbsolute: true,
-        scrollbars: { autoHide: 'leave' },
-      });
-      return () => instance.destroy();
+      initialize(ref.current);
+      return () => instance()?.destroy();
     }
-  });
-  return <pre ref={ref}>{children}</pre>;
+  }, []);
+
+  return (
+    <pre ref={ref} data-overlayscrollbars-initialize>
+      {children}
+    </pre>
+  );
 };