[rc] fix: Table overlay glitch

Peersyst · Dec 23, 2024 · 837aafb · 837aafb
1 parent 3775af5
commit 837aafb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/packages/genesys/packages/react-components/package.json b/packages/genesys/packages/react-components/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@peersyst/react-components",
     "author": "Peersyst",
-    "version": "3.9.48",
+    "version": "3.9.49",
     "license": "MIT",
     "main": "./src/index.tsx",
     "engines": {

diff --git a/packages/genesys/packages/react-components/src/Table/TableOverlay/TableOverlay.tsx b/packages/genesys/packages/react-components/src/Table/TableOverlay/TableOverlay.tsx
@@ -26,18 +26,20 @@ const TableLoadingOverlay = ({
 
         if (currentContainerRef)
             new ResizeObserver(() => {
-                const newLoadingOverlayHeight =
-                    currentContainerRef.clientHeight - (headerRef.current?.clientHeight || 0);
+                if (headerRef.current !== undefined) {
+                    const newLoadingOverlayHeight =
+                        currentContainerRef.clientHeight - headerRef.current.clientHeight;
 
-                if (
-                    currentContainerRef.clientWidth !== overlayRect.width ||
-                    newLoadingOverlayHeight !== overlayRect.height
-                )
-                    setOverlayRect((rect) => ({
-                        ...rect,
-                        width: currentContainerRef.clientWidth,
-                        height: newLoadingOverlayHeight,
-                    }));
+                    if (
+                        currentContainerRef.clientWidth !== overlayRect.width ||
+                        newLoadingOverlayHeight !== overlayRect.height
+                    )
+                        setOverlayRect((rect) => ({
+                            ...rect,
+                            width: currentContainerRef.clientWidth,
+                            height: newLoadingOverlayHeight,
+                        }));
+                }
             }).observe(currentContainerRef);
     }, [containerRef]);
 
@@ -46,18 +48,20 @@ const TableLoadingOverlay = ({
 
         if (currentHeaderRef)
             new ResizeObserver(() => {
-                const newLoadingOverlayHeight =
-                    (containerRef.current?.clientHeight || 0) - currentHeaderRef.clientHeight;
+                if (containerRef.current !== undefined) {
+                    const newLoadingOverlayHeight =
+                        containerRef.current.clientHeight - currentHeaderRef.clientHeight;
 
-                if (
-                    currentHeaderRef.clientHeight !== overlayRect.top ||
-                    newLoadingOverlayHeight !== overlayRect.height
-                )
-                    setOverlayRect((rect) => ({
-                        ...rect,
-                        top: currentHeaderRef.clientHeight,
-                        height: newLoadingOverlayHeight,
-                    }));
+                    if (
+                        currentHeaderRef.clientHeight !== overlayRect.top ||
+                        newLoadingOverlayHeight !== overlayRect.height
+                    )
+                        setOverlayRect((rect) => ({
+                            ...rect,
+                            top: currentHeaderRef.clientHeight,
+                            height: newLoadingOverlayHeight,
+                        }));
+                }
             }).observe(currentHeaderRef);
     }, [headerRef]);