From 40325e5b41fdfe2041619ab33ce3a39105d069ba Mon Sep 17 00:00:00 2001
From: Arthur de Moulins <arthurdemoulins@gmail.com>
Date: Wed, 27 Mar 2024 15:51:52 +0100
Subject: [PATCH] fix

---
 databox/client/src/components/AssetList/LoadMoreButton.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/databox/client/src/components/AssetList/LoadMoreButton.tsx b/databox/client/src/components/AssetList/LoadMoreButton.tsx
index 9d01ed1ea..34d447041 100644
--- a/databox/client/src/components/AssetList/LoadMoreButton.tsx
+++ b/databox/client/src/components/AssetList/LoadMoreButton.tsx
@@ -17,7 +17,6 @@ export default function LoadMoreButton<Item extends AssetOrAssetContainer>({onCl
     const [loading, setLoading] = React.useState(false);
     const ref = React.useRef<HTMLDivElement>();
     const loadingRef = React.useRef(false);
-    const scrollableNode = ref.current?.closest(`.${assetClasses.scrollable}`);
 
     const doLoad = React.useCallback(() => {
         if (loadingRef.current) {
@@ -35,11 +34,13 @@ export default function LoadMoreButton<Item extends AssetOrAssetContainer>({onCl
 
     React.useLayoutEffect(() => {
         if (pages[0]) {
+            const scrollableNode = ref.current?.closest(`.${assetClasses.scrollable}`);
             scrollableNode?.scrollTo({top: 0, left: 0});
         }
-    }, [pages[0], scrollableNode]);
+    }, [pages[0], ref]);
 
     React.useEffect(() => {
+        const scrollableNode = ref.current?.closest(`.${assetClasses.scrollable}`);
         if (scrollableNode) {
             const onScrollEnd = (e: HTMLElementEventMap['scroll']) => {
                 const {scrollTop, scrollHeight, clientHeight} = e.currentTarget as HTMLDivElement;
@@ -53,7 +54,7 @@ export default function LoadMoreButton<Item extends AssetOrAssetContainer>({onCl
                 scrollableNode.removeEventListener('scroll', onScrollEnd);
             }
         }
-    }, [doLoad, scrollableNode]);
+    }, [doLoad, ref]);
 
     return (
         <Box