From d3529cd9478369af85f689936a07d5b9926d36b1 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 7 Jun 2023 15:37:13 +0200
Subject: [PATCH] improve overlayscrollbars component

---
 code/ui/components/package.json               |  1 -
 .../src/ScrollArea/OverlayScrollbars.tsx      | 29 ++-----------------
 .../components/src/ScrollArea/ScrollArea.tsx  |  1 +
 code/yarn.lock                                |  8 -----
 4 files changed, 3 insertions(+), 36 deletions(-)

diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index c7fa6cc617ca..2bc31dd9e9ee 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -59,7 +59,6 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.6.0",
-    "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/util-deprecate": "^1.0.0",
     "css": "^3.0.0",
diff --git a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx
index 2bd638ffc345..c5043032448c 100644
--- a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx
+++ b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx
@@ -1,30 +1,5 @@
-import type { FC } from 'react';
-import React, { useRef, useEffect } from 'react';
-import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 
-import { useOverlayScrollbars } from 'overlayscrollbars-react';
-
-export const OverlayScrollbarsComponent: FC<{
-  options: UseOverlayScrollbarsParams['options'];
-  className?: string;
-}> = ({
-  options = {},
-
-  className,
-  children,
-}) => {
-  const ref = useRef<HTMLDivElement>();
-  const [initialize] = useOverlayScrollbars({ options });
-
-  useEffect(() => {
-    initialize(ref.current);
-  }, [initialize]);
-
-  return (
-    <div className={className} ref={ref}>
-      {children}
-    </div>
-  );
-};
+export const OverlayScrollbars = OverlayScrollbarsComponent;
 
 export default OverlayScrollbarsComponent;
diff --git a/code/ui/components/src/ScrollArea/ScrollArea.tsx b/code/ui/components/src/ScrollArea/ScrollArea.tsx
index 02cce4bdd8f5..51a0f5786679 100644
--- a/code/ui/components/src/ScrollArea/ScrollArea.tsx
+++ b/code/ui/components/src/ScrollArea/ScrollArea.tsx
@@ -9,6 +9,7 @@ const Scroller: FC<ScrollAreaProps> = ({ horizontal, vertical, ...props }) => (
   <Suspense fallback={<div {...props} />}>
     <GlobalScrollAreaStyles />
     <OverlayScrollbars
+      defer
       options={{ scrollbars: { autoHide: 'leave', visibility: 'auto' } }}
       {...props}
     />
diff --git a/code/yarn.lock b/code/yarn.lock
index 0df1c757b84f..9dfc73bb87aa 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6248,7 +6248,6 @@ __metadata:
     "@storybook/global": ^5.0.0
     "@storybook/theming": 7.1.0-alpha.29
     "@storybook/types": 7.1.0-alpha.29
-    "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
     "@types/util-deprecate": ^1.0.0
     css: ^3.0.0
@@ -8758,13 +8757,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/overlayscrollbars@npm:^1.12.0":
-  version: 1.12.1
-  resolution: "@types/overlayscrollbars@npm:1.12.1"
-  checksum: 01e5f3e96ddb349fc49c7e6d8b5b6e2c930c4e50d19d3f269df8f537d149cb054ddfe9db617fb7c071f0799163cd9e633e4d23491f070c9888bca827b0b964e7
-  languageName: node
-  linkType: hard
-
 "@types/parse-json@npm:^4.0.0":
   version: 4.0.0
   resolution: "@types/parse-json@npm:4.0.0"