fix(sidesheet grid): height 0 on first render (#1123)

equinor · Sep 12, 2024 · d7c6d19 · d7c6d19
1 parent da9432e
commit d7c6d19
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 40 deletions.
diff --git a/libs/handoversidesheet/src/lib/ui-sidesheet/HandoverSidesheet.tsx b/libs/handoversidesheet/src/lib/ui-sidesheet/HandoverSidesheet.tsx
@@ -23,7 +23,6 @@ import {
   SwcrTab,
   UnsignedActionTab,
   UnsignedTaskTab,
-  WorkorderBase,
   WorkorderTab,
   useContextId,
 } from '@cc-components/shared';

diff --git a/libs/shared/src/packages/table-helpers/src/lib/table/TabTable/TabTable.tsx b/libs/shared/src/packages/table-helpers/src/lib/table/TabTable/TabTable.tsx
@@ -29,51 +29,51 @@ export const TabTable = <T extends Record<PropertyKey, unknown>>(
   const ref = useRef<HTMLDivElement | null>(null);
   const [_, refHeight] = useResizeObserver(ref);
   const { columns, error, isFetching, packages, resourceName } = props;
-  const gridHeight = packages && packages.length > 30 ? refHeight : "auto-height"
 
-  if (isFetching) {
-    return (
-      <NoResourceData>
-        <Progress.Circular />
-        <InfoText>{`Fetching ${resourceName}`}</InfoText>
-      </NoResourceData>
-    );
-  }
 
-  if (error) {
-    return (
-      <NoResourceData>
-        <Icon
-          name="error_outlined"
-          size={40}
-          color={tokens.colors.interactive.primary__resting.hsla}
-        />
-        <InfoText>{`Failed to load ${resourceName}`}</InfoText>
-      </NoResourceData>
-    );
-  }
+  const gridHeight = packages && packages.length > 30 ? refHeight : "auto-height"
 
-  if (packages === undefined || packages.length === 0) {
-    return (
-      <NoResourceData>
-        <Icon
-          name="info_circle"
-          size={40}
-          color={tokens.colors.interactive.primary__resting.hsla}
-        />
-        <InfoText>{`No ${resourceName}`}</InfoText>
-      </NoResourceData>
-    );
-  }
 
   return (
     <div ref={ref} style={{ height: "100%", width: "100%" }}>
-      <ClientGrid
-        rowData={packages}
-        colDefs={columns}
-        height={typeof (gridHeight) === "number" ? gridHeight : 500}
-        gridOptions={{ ...defaultGridOptions, ...props.additionalGridOptions, domLayout: gridHeight === "auto-height" ? "autoHeight" : undefined }}
-      />
+      {isFetching && (
+
+        <NoResourceData>
+          <Progress.Circular />
+          <InfoText>{`Fetching ${resourceName}`}</InfoText>
+        </NoResourceData>
+      )}
+
+      {error && (
+        <NoResourceData>
+          <Icon
+            name="error_outlined"
+            size={40}
+            color={tokens.colors.interactive.primary__resting.hsla}
+          />
+          <InfoText>{`Failed to load ${resourceName}`}</InfoText>
+        </NoResourceData>
+      )}
+
+      {packages && packages.length === 0 && (
+        <NoResourceData>
+          <Icon
+            name="info_circle"
+            size={40}
+            color={tokens.colors.interactive.primary__resting.hsla}
+          />
+          <InfoText>{`No ${resourceName}`}</InfoText>
+        </NoResourceData>
+      )}
+
+      {packages && packages.length > 0 && (
+        <ClientGrid
+          rowData={packages}
+          colDefs={columns}
+          height={typeof (gridHeight) === "number" ? gridHeight : 500}
+          gridOptions={{ ...defaultGridOptions, ...props.additionalGridOptions, domLayout: gridHeight === "auto-height" ? "autoHeight" : undefined }}
+        />
+      )}
     </div>
   );
 };