improve website

website/src/assets/css/styles.css

@@ -3,18 +3,21 @@
   src: url('~/assets/font/noto_sans/NotoSans-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: Noto Sans;
   src: url('~/assets/font/noto_sans/NotoSans-SemiBold.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: Noto Sans;
   src: url('~/assets/font/noto_sans/NotoSans-ExtraBold.ttf') format('truetype');
   font-weight: 800;
   font-style: normal;
+  font-display: swap;
 }
 
 /* elements wont be suddenly cropped after initialization is done */

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>
+  );
 };

website/src/hooks/useOverlayScrollbarsIdle.ts

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import type {
+  UseOverlayScrollbarsParams,
+  UseOverlayScrollbarsInitialization,
+  UseOverlayScrollbarsInstance,
+} from 'overlayscrollbars-react';
+import type { InitializationTarget } from 'overlayscrollbars';
+
+export const useOverlayScrollbarsIdle = (
+  params?: UseOverlayScrollbarsParams
+): [
+  (...args: Parameters<UseOverlayScrollbarsInitialization>) => void,
+  UseOverlayScrollbarsInstance
+] => {
+  const [initialize, instance] = useOverlayScrollbars(params);
+  return useMemo(
+    () => [
+      (target: InitializationTarget) => {
+        if (typeof window !== 'undefined' && window.requestIdleCallback) {
+          window.requestIdleCallback(
+            () => {
+              initialize(target);
+            },
+            { timeout: 2000 }
+          );
+        } else {
+          initialize(target);
+        }
+      },
+      instance,
+    ],
+    [initialize, instance]
+  );
+};

website/src/pages/_app.tsx

@@ -2,9 +2,9 @@ import '~/assets/css/tailwind.css';
 import '~/assets/css/styles.css';
 import 'overlayscrollbars/overlayscrollbars.css';
 import { useEffect } from 'react';
-import { OverlayScrollbars } from 'overlayscrollbars';
 import Head from 'next/head';
 import { MDXProvider } from '@mdx-js/react';
+import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
 import favicon from '~/assets/favicon.ico';
 import { Pre } from '~/components/md/Pre';
 import { Heading } from '~/components/md/Heading';
@@ -18,10 +18,11 @@ const generateHeading = (props: ComponentProps<'h1'>, tag: HeadingProps['tag'])
 );
 
 const OverlayScrollbarsDocs = ({ Component, pageProps }: AppProps) => {
+  const [initialize, instance] = useOverlayScrollbarsIdle();
+
   useEffect(() => {
-    const bodyInstance = OverlayScrollbars(document.body, {});
-    // @ts-ignore
-    window.osBody = bodyInstance;
+    initialize(document.body);
+    return () => instance()?.destroy();
   }, []);
 
   return (

website/src/pages/index.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
-import { OverlayScrollbars } from 'overlayscrollbars';
+import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
 import { PageContainer } from '~/components/PageContainer';
 import { Icon } from '~/components/Icon';
 import logo from '~/assets/img/logo.svg';
@@ -24,11 +24,12 @@ const separator = (children: ReactNode) => (
 
 const IndexPage: NextPage = () => {
   const usedByRef = useRef<HTMLDivElement | null>(null);
+  const [initialize, instance] = useOverlayScrollbarsIdle();
 
   useEffect(() => {
     if (usedByRef.current) {
-      const instance = OverlayScrollbars(usedByRef.current, {});
-      return () => instance.destroy();
+      initialize(usedByRef.current);
+      return () => instance()?.destroy();
     }
   }, []);
 
@@ -36,7 +37,13 @@ const IndexPage: NextPage = () => {
     <PageContainer className="px-6">
       <div className="mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44">
         <div className={classnames('h-full', styles.logo)}>
-          <img src={logo.src} className="h-full" alt="OverlayScrollbars Logo" />
+          <img
+            src={logo.src}
+            className="h-full"
+            alt="OverlayScrollbars Logo"
+            width="200"
+            height="200"
+          />
         </div>
       </div>
       <h1 className="text-center xxs:text-4xl text-2xl font-bold my-11">
@@ -49,7 +56,7 @@ const IndexPage: NextPage = () => {
         overlay scrollbars and keeps the native functionality and feeling.
       </p>
       {separator('used by')}
-      <div ref={usedByRef}>
+      <div ref={usedByRef} data-overlayscrollbars-initialize>
         <div className="flex justify-center">
           <div className={classnames('inline-flex  items-center gap-6 py-6', styles.usedBy)}>
             <div