@databiosphere/findable-ui 24.0.0 → 25.1.0

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton, Toolbar as MToolbar } from "@mui/material";
 import React, { Fragment, ReactNode } from "react";
 import { ComponentsConfig } from "../../../../../../../../../../../../config/entities";
@@ -57,7 +57,7 @@ export const Toolbar = ({
             {actions}
             {/* Close menu */}
             <IconButton color="ink" onClick={onClose}>
-              <CloseRoundedIcon />
+              <CloseRounded />
             </IconButton>
           </Actions>
         </Right>

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.tsx

@@ -1,4 +1,4 @@
-import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
+import { MenuRounded } from "@mui/icons-material";
 import { Fade, IconButton, Dialog as MDialog } from "@mui/material";
 import React, { CSSProperties, forwardRef, Fragment, useEffect } from "react";
 import { getMenuNavigationLinks } from "../../../../../../common/utils";
@@ -47,7 +47,7 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
     return (
       <Fragment>
         <IconButton color="ink" onClick={openMenu} ref={ref} style={style}>
-          <MenuRoundedIcon />
+          <MenuRounded />
         </IconButton>
         <MDialog
           {...DIALOG_PROPS}

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.ts

@@ -5,14 +5,19 @@ import {
   smokeMain,
 } from "../../../../../../../../../../../../styles/common/mixins/colors";
 import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
-import { HEADER_HEIGHT } from "../../../../../../../../common/constants";
 
-export const SearchBar = styled(Dialog)`
+interface Props {
+  yOffset: number;
+}
+
+export const SearchBar = styled(Dialog, {
+  shouldForwardProp: (prop) => prop !== "yOffset",
+})<Props>`
   .MuiDialog-container {
     width: 100%;
 
     .MuiDialog-paper {
-      margin-top: ${HEADER_HEIGHT}px;
+      margin-top: ${(props) => props.yOffset}px;
     }
   }
 `;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { useSearchParams } from "next/navigation";
 import Router from "next/router";
 import React, {
@@ -9,6 +9,7 @@ import React, {
   useState,
 } from "react";
 import { isValidUrl } from "../../../../../../../../../../../../common/utils";
+import { useLayoutDimensions } from "../../../../../../../../../../../../providers/layoutDimensions/hook";
 import { ButtonPrimary } from "../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
 import { isClientSideNavigation } from "../../../../../../../../../../../Links/common/utils";
@@ -33,6 +34,7 @@ export default function SearchBar({
   searchOpen,
   searchURL,
 }: Props): JSX.Element {
+  const { dimensions } = useLayoutDimensions();
   const inputRef = useRef<HTMLInputElement>(null);
   const searchParams = useSearchParams();
   const [searchTerm, setSearchTerm] = useState<string>("");
@@ -108,6 +110,7 @@ export default function SearchBar({
       open={searchOpen}
       PaperProps={{ variant: "searchbar" }}
       TransitionProps={{ onExited: handleExited }}
+      yOffset={dimensions.header.height - 1} // 1px border.
     >
       <SearchForm
         onSubmit={(e: FormEvent<HTMLFormElement>): void =>
@@ -122,7 +125,7 @@ export default function SearchBar({
             searchTerm ? (
               <ClearButton
                 edge="end"
-                Icon={CloseRoundedIcon}
+                Icon={CloseRounded}
                 onClick={handleClear}
                 size="small"
               />

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React, { ReactNode, useCallback } from "react";
 import { Button } from "../../../../../../../../../common/Button/button";
 import { BackArrowIcon } from "../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon";
@@ -43,7 +43,7 @@ export const NavigationDrawer = ({
   return (
     <>
       <Button
-        EndIcon={ArrowDropDownRoundedIcon}
+        EndIcon={ArrowDropDownRounded}
         onClick={onOpen}
         variant={isSelected ? "activeNav" : "nav"}
       >

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import {
   Grow,
   ClickAwayListener as MClickAwayListener,
@@ -55,7 +55,7 @@ export const NavigationMenu = ({
   return (
     <MenuItem>
       <Button
-        EndIcon={ArrowDropDownRoundedIcon}
+        EndIcon={ArrowDropDownRounded}
         isActive={open}
         onClick={onOpen}
         variant={isSelected ? "activeNav" : "nav"}

package/src/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.tsx

@@ -1,4 +1,4 @@
-import FilterListRoundedIcon from "@mui/icons-material/FilterListRounded";
+import { FilterListRounded } from "@mui/icons-material";
 import React, { ReactNode } from "react";
 import { Badge, SidebarButton as Button } from "./sidebarButton.styles";
 
@@ -18,7 +18,7 @@ export const SidebarButton = ({
 }: SidebarButtonProps): JSX.Element => {
   return (
     <Button className={className} onClick={onClick} {...props}>
-      <FilterListRoundedIcon fontSize="small" />
+      <FilterListRounded fontSize="small" />
       {label}
       {count > 0 && <Badge>{count}</Badge>}
     </Button>

package/src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.tsx

@@ -1,6 +1,7 @@
 import { CloseRounded } from "@mui/icons-material";
 import { PopoverPosition, PopoverProps } from "@mui/material";
 import React, { ReactNode } from "react";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { DrawerTransition } from "../../../../../Filter/components/Filter/components/DrawerTransition/drawerTransition";
 import { IconButton, TemporarySidebar } from "./sidebarDrawer.styles";
 
@@ -25,6 +26,7 @@ export const SidebarDrawer = ({
     <TemporarySidebar
       anchorPosition={DEFAULT_POSITION}
       anchorReference="anchorPosition"
+      data-testid={TEST_IDS.SIDEBAR_DRAWER}
       hideBackdrop={false}
       marginThreshold={0}
       onClose={onDrawerClose}

package/src/components/Layout/components/Sidebar/sidebar.tsx

@@ -3,6 +3,7 @@ import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
 } from "../../../../hooks/useBreakpointHelper";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { SidebarDrawer } from "./components/SidebarDrawer/sidebarDrawer";
 import { SidebarPositioner } from "./components/SidebarPositioner/sidebarPositioner";
@@ -26,7 +27,9 @@ export const Sidebar = ({
   const controlledSidebar = typeof drawerOpen === "boolean";
   const drawerSidebar = controlledSidebar && desktopSmDown; // Sidebar is "temporary" drawer when drawerOpen is defined and breakpoint is smaller than the breakpoint.
   const Bar = drawerSidebar ? SidebarDrawer : PermanentSidebar;
-  const barProps = drawerSidebar ? { drawerOpen, onDrawerClose } : {};
+  const barProps = drawerSidebar
+    ? { drawerOpen, onDrawerClose }
+    : { "data-testid": TEST_IDS.SIDEBAR };
 
   // Closes an open, controlled drawer sidebar with a change of breakpoint.
   useEffect(() => {

package/src/components/Loading/loading.tsx

@@ -21,7 +21,14 @@ export enum LOADING_PANEL_STYLE {
 }
 
 export interface LoadingProps {
-  appear?: boolean; // Note, if false, the component will not transition on the initial render and onEnter callbacks will not be called. In this instance, ensure the parent container is styled correctly with position relative.
+  /* `appear`, if false, the component will not transition on the initial render and onEnter callbacks will not be called.
+   * In this instance, ensure the parent container is styled correctly with position relative.
+   */
+  appear?: boolean;
+  /* `autoPosition`, if true, the loading component will automatically apply `position: relative` to its parent on enter and remove it on exit.
+   * False will disable this behavior, and the parent will need to be styled with `position: relative` manually.
+   */
+  autoPosition?: boolean;
   iconSize?: SvgIconProps["fontSize"];
   loading: boolean;
   panelStyle?: LoadingPanelStyle; // Enables loading to mirror parent container styles.
@@ -30,6 +37,7 @@ export interface LoadingProps {
 
 export const Loading = ({
   appear = true,
+  autoPosition = true,
   iconSize = "large",
   loading,
   panelStyle = PAPER_PANEL_STYLE.ROUNDED,
@@ -40,8 +48,8 @@ export const Loading = ({
       appear={appear}
       in={loading}
       mountOnEnter
-      onEnter={(node: HTMLElement): void => onFadeEnter(node)}
-      onExited={(node: HTMLElement): void => onFadeExited(node)}
+      onEnter={autoPosition ? onFadeEnter : undefined}
+      onExited={autoPosition ? onFadeExited : undefined}
       timeout={300}
       unmountOnExit
     >

package/src/components/Login/components/Section/components/Consent/consent.styles.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 
-export const StyledGrid2 = styled(Grid2)`
+export const StyledGrid = styled(Grid)`
   align-items: center;
   align-self: flex-start;
   display: flex;

package/src/components/Login/components/Section/components/Consent/consent.tsx

@@ -5,7 +5,7 @@ import { CheckedIcon } from "../../../../../common/CustomIcon/components/Checked
 import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { BaseComponentProps } from "../../../../../types";
-import { StyledGrid2 } from "./consent.styles";
+import { StyledGrid } from "./consent.styles";
 import { ConsentProps } from "./types";
 
 export const Consent = ({
@@ -14,17 +14,17 @@ export const Consent = ({
   handleConsent,
   isDisabled,
   isError,
-  ...props /* Mui Grid2Props */
+  ...props /* Mui GridProps */
 }: BaseComponentProps & ConsentProps): JSX.Element | null => {
   if (isDisabled) return null;
   return (
-    <StyledGrid2 className={className} {...props}>
+    <StyledGrid className={className} {...props}>
       <Checkbox
         checkedIcon={<CheckedIcon />}
         icon={isError ? <UncheckedErrorIcon /> : <UncheckedIcon />}
         onChange={handleConsent}
       />
       <Typography variant={TEXT_BODY_400}>{children}</Typography>
-    </StyledGrid2>
+    </StyledGrid>
   );
 };

package/src/components/Login/components/Section/components/Consent/types.ts

@@ -1,9 +1,9 @@
-import { Grid2Props } from "@mui/material";
+import { GridProps } from "@mui/material";
 import { ReactNode } from "react";
 import { UseUserConsent } from "../../../../hooks/useUserConsent/types";
 
 export interface ConsentProps
-  extends Grid2Props,
+  extends GridProps,
     Pick<UseUserConsent, "handleConsent">,
     Pick<UseUserConsent["state"], "isDisabled" | "isError"> {
   children: ReactNode;

package/src/components/NoResults/noResults.styles.ts

@@ -1,12 +1,14 @@
 import styled from "@emotion/styled";
+import { white } from "../../styles/common/mixins/colors";
 import { Section, SectionContent } from "../common/Section/section.styles";
 
-export const NoResultsSection = styled(Section)`
+export const StyledSection = styled(Section)`
   align-items: center;
+  background-color: ${white};
   padding: 40px !important; /* Overrides section padding. */
 `;
 
-export const NoResultsSectionContent = styled(SectionContent)`
+export const StyledSectionContent = styled(SectionContent)`
   max-width: 456px;
   text-align: center;
 `;

package/src/components/NoResults/noResults.tsx

@@ -1,43 +1,37 @@
 import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
+import React, { Fragment } from "react";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { SearchOffIcon } from "../common/CustomIcon/components/SearchOffIcon/searchOffIcon";
-import {
-  FlatPaper,
-  FluidPaper,
-  RoundedPaper,
-} from "../common/Paper/paper.styles";
 import { SectionTitle } from "../common/Section/components/SectionTitle/sectionTitle";
 import { SectionActions } from "../common/Section/section.styles";
 import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
-import { NoResultsSection, NoResultsSectionContent } from "./noResults.styles";
-
-export interface NoResultsProps {
-  actions?: ReactNode;
-  description?: string;
-  Paper?: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper;
-  title: string;
-}
+import { StyledSection, StyledSectionContent } from "./noResults.styles";
+import { NoResultsProps } from "./types";
 
 export const NoResults = ({
   actions,
   description,
-  Paper = RoundedPaper,
+  Paper,
   title,
 }: NoResultsProps): JSX.Element => {
+  const StyledPaper = Paper ?? Fragment;
   return (
-    <Paper>
-      <NoResultsSection>
+    <StyledPaper>
+      <StyledSection>
         <StatusIcon priority={PRIORITY.LOW} StatusIcon={SearchOffIcon} />
-        <NoResultsSectionContent>
+        <StyledSectionContent>
           <SectionTitle title={title} />
           {description && (
-            <Typography color="ink.light" variant="text-body-400-2lines">
+            <Typography
+              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+              variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
+            >
               {description}
             </Typography>
           )}
-        </NoResultsSectionContent>
+        </StyledSectionContent>
         {actions && <SectionActions>{actions}</SectionActions>}
-      </NoResultsSection>
-    </Paper>
+      </StyledSection>
+    </StyledPaper>
   );
 };

package/src/components/NoResults/types.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import {
+  FlatPaper,
+  FluidPaper,
+  RoundedPaper,
+} from "../common/Paper/paper.styles";
+
+export interface NoResultsProps {
+  actions?: ReactNode;
+  description?: string;
+  Paper: typeof FlatPaper | typeof FluidPaper | typeof RoundedPaper | null;
+  title: string;
+}

package/src/components/Plot/components/BarX/barX.tsx

@@ -0,0 +1,20 @@
+import * as Plot from "@observablehq/plot";
+import React, { useEffect, useRef } from "react";
+import { BarXProps } from "./types";
+
+export const BarX = ({
+  className,
+  options,
+  testId,
+}: BarXProps): JSX.Element => {
+  const chartRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (chartRef.current) chartRef.current.innerHTML = "";
+    const chart = Plot.plot(options);
+    chartRef.current?.appendChild(chart);
+    return (): void => chart.remove();
+  }, [options]);
+
+  return <div className={className} data-testid={testId} ref={chartRef} />;
+};

package/src/components/Plot/components/BarX/types.ts

@@ -0,0 +1,6 @@
+import { PlotOptions } from "@observablehq/plot";
+import { BaseComponentProps, TestIdProps } from "../../../types";
+
+export interface BarXProps extends BaseComponentProps, TestIdProps {
+  options?: PlotOptions;
+}

package/src/components/Stepper/components/Step/components/StepContent/stepContent.styles.ts

@@ -6,7 +6,7 @@ import { sectionPadding } from "../../../../../common/Section/section.styles";
 export const StyledStepContent = styled(StepContent)`
   &.MuiStepContent-root {
     .MuiCollapse-wrapperInner.MuiCollapse-vertical {
-      > .MuiGrid2-root {
+      > .MuiGrid-root {
         ${sectionPadding};
         border-top: 1px solid ${smokeMain};
         display: grid;

package/src/components/Stepper/components/Step/components/StepContent/stepContent.tsx

@@ -1,4 +1,4 @@
-import { Grid2, StepContentProps } from "@mui/material";
+import { Grid, StepContentProps } from "@mui/material";
 import React from "react";
 import { BaseComponentProps } from "../../../../../types";
 import { StyledStepContent } from "./stepContent.styles";
@@ -10,7 +10,7 @@ export const StepContent = ({
 }: BaseComponentProps & StepContentProps): JSX.Element => {
   return (
     <StyledStepContent className={className} {...props}>
-      <Grid2>{children}</Grid2>
+      <Grid>{children}</Grid>
     </StyledStepContent>
   );
 };

package/src/components/Support/components/SupportRequest/components/Dialog/dialog.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import React, {
   Dispatch,
   MouseEvent,
@@ -32,7 +32,7 @@ export const FormDialog = ({
   return (
     <>
       <Fab color="primary" onClick={toggleOpen} open={open} size="medium">
-        {open ? <CloseRoundedIcon /> : <FeedbackIcon fontSize="medium" />}
+        {open ? <CloseRounded /> : <FeedbackIcon fontSize="medium" />}
       </Fab>
       <Popover
         anchorEl={anchorEl}

package/src/components/Table/components/Pagination/pagination.tsx

@@ -1,7 +1,7 @@
-import EastRoundedIcon from "@mui/icons-material/EastRounded";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
+import { EastRounded, WestRounded } from "@mui/icons-material";
 import { Typography } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { IconButton } from "../../../common/IconButton/iconButton";
 import { Stack } from "../../../common/Stack/stack";
 import { Pagination as TablePagination } from "./pagination.styles";
@@ -24,8 +24,8 @@ export const Pagination = ({
   totalPage,
 }: PaginationProps): JSX.Element => {
   return (
-    <TablePagination>
-      <div>
+    <TablePagination data-testid={TEST_IDS.TABLE_PAGINATION}>
+      <div data-testid={TEST_IDS.TABLE_PAGINATION_PAGE}>
         <Typography variant="text-body-400">Page </Typography>
         <Typography variant="text-body-500">
           {currentPage} of {totalPage}
@@ -35,13 +35,13 @@ export const Pagination = ({
         <IconButton
           color="secondary"
           disabled={!canPreviousPage}
-          Icon={WestRoundedIcon}
+          Icon={WestRounded}
           onClick={onPreviousPage}
         />
         <IconButton
           color="secondary"
           disabled={!canNextPage}
-          Icon={EastRoundedIcon}
+          Icon={EastRounded}
           onClick={onNextPage}
         />
       </Stack>

package/src/components/Table/components/PaginationSummary/paginationSummary.tsx

@@ -1,5 +1,6 @@
 import { Fade, Typography } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 
 export interface PaginationSummaryProps {
   firstResult: number;
@@ -14,7 +15,7 @@ export const PaginationSummary = ({
 }: PaginationSummaryProps): JSX.Element => {
   return (
     <Fade in={totalResult > 0}>
-      <div>
+      <div data-testid={TEST_IDS.TABLE_PAGINATION_RESULTS}>
         <Typography variant="text-body-400">Results </Typography>
         <Typography variant="text-body-small-500">
           {firstResult} - {lastResult}

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -1,4 +1,4 @@
-import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
+import { SouthRounded } from "@mui/icons-material";
 import {
   TableHead as MTableHead,
   TableRow as MTableRow,
@@ -42,7 +42,7 @@ export const TableHead = <T extends RowData>({
                     >
                       {shouldSortColumn(tableInstance, column) ? (
                         <TableSortLabel
-                          IconComponent={SouthRoundedIcon}
+                          IconComponent={SouthRounded}
                           active={Boolean(getIsSorted())}
                           direction={getIsSorted() || undefined}
                           disabled={isSortDisabled(tableInstance)}

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -2,6 +2,7 @@ import { TableCell } from "@mui/material";
 import { flexRender, Row, RowData } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import {
   getTableCellAlign,
   getTableCellPadding,
@@ -21,21 +22,27 @@ export const TableRows = <T extends RowData>({
   return (
     <Fragment>
       {virtualItems.map((virtualRow) => {
-        const row = rows[virtualRow.index] as Row<T>;
+        const rowIndex = virtualRow.index;
+        const row = rows[rowIndex] as Row<T>;
         const { getIsGrouped, getIsPreview } = row;
         return (
           <TableRow
             key={row.id}
-            data-index={virtualRow.index}
+            data-index={rowIndex}
             isGrouped={getIsGrouped()}
             isPreview={getIsPreview()}
             ref={virtualizer.measureElement}
           >
-            {row.getVisibleCells().map((cell) => {
+            {row.getVisibleCells().map((cell, i) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
               if (cell.getIsPlaceholder()) return null; // Display of placeholder cells is currently not supported.
               return (
                 <TableCell
+                  data-testid={
+                    rowIndex === 0 && i === 0
+                      ? TEST_IDS.TABLE_FIRST_CELL
+                      : undefined
+                  }
                   key={cell.id}
                   align={getTableCellAlign(cell.column)}
                   padding={getTableCellPadding(cell.column.id)}

package/src/components/Table/table.tsx

@@ -14,7 +14,7 @@ import {
   Updater,
   useReactTable,
 } from "@tanstack/react-table";
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { Fragment, useCallback, useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
   EVENT_NAME,
@@ -33,7 +33,7 @@ import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/initializer/constants";
 import { TABLET } from "../../theme/common/breakpoints";
-import { FluidPaper, GridPaper } from "../common/Paper/paper.styles";
+import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
 import { NoResults } from "../NoResults/noResults";
 import { getColumnTrackSizing } from "../TableCreator/options/columnTrackSizing/utils";
 import { ROW_DIRECTION } from "./common/entities";
@@ -88,7 +88,7 @@ TableProps<T>): JSX.Element => {
     entityPageState,
     filterState,
     listItems,
-    loading,
+    loading = false,
     paginationState,
     rowPreview,
     tabValue,
@@ -285,43 +285,47 @@ TableProps<T>): JSX.Element => {
   }
 
   return noResults ? (
-    <NoResults Paper={FluidPaper} title={"No Results found"} />
+    <NoResults Paper={null} title="No Results found" />
   ) : (
-    <FluidPaper variant="table">
-      <GridPaper>
-        <TableToolbar
-          listView={listView}
-          rowDirection={rowDirection}
-          tableInstance={tableInstance}
-        />
-        <TableContainer>
-          <GridTable
-            collapsable={true}
-            gridTemplateColumns={getColumnTrackSizing(getVisibleFlatColumns())}
-          >
-            <TableHead
-              rowDirection={rowDirection}
-              tableInstance={tableInstance}
-            />
-            <TableBody
-              rows={rows}
-              rowDirection={rowDirection}
-              tableInstance={tableInstance}
-            />
-          </GridTable>
-        </TableContainer>
-        {!disablePagination && (
-          <DXPagination
-            canNextPage={canNextPage()}
-            canPreviousPage={canPreviousPage()}
-            currentPage={currentPage}
-            onNextPage={handleTableNextPage}
-            onPreviousPage={handleTablePreviousPage}
-            totalPage={pages ?? 0}
+    <Fragment>
+      <TableToolbar
+        listView={listView}
+        rowDirection={rowDirection}
+        tableInstance={tableInstance}
+      />
+      <Loading
+        appear={false}
+        autoPosition={false}
+        loading={loading}
+        panelStyle={LOADING_PANEL_STYLE.INHERIT}
+      />
+      <TableContainer>
+        <GridTable
+          collapsable={true}
+          gridTemplateColumns={getColumnTrackSizing(getVisibleFlatColumns())}
+        >
+          <TableHead
+            rowDirection={rowDirection}
+            tableInstance={tableInstance}
+          />
+          <TableBody
+            rows={rows}
+            rowDirection={rowDirection}
+            tableInstance={tableInstance}
           />
-        )}
-      </GridPaper>
-    </FluidPaper>
+        </GridTable>
+      </TableContainer>
+      {!disablePagination && (
+        <DXPagination
+          canNextPage={canNextPage()}
+          canPreviousPage={canPreviousPage()}
+          currentPage={currentPage}
+          onNextPage={handleTableNextPage}
+          onPreviousPage={handleTablePreviousPage}
+          totalPage={pages ?? 0}
+        />
+      )}
+    </Fragment>
   );
 };