Merge branch 'v4' into feature/pre-commit-hook

Author: finalight

package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.197",
+  "version": "4.0.198",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",

src/@next/IndexTable/IndexTable.tsx

@@ -2,18 +2,23 @@ import React from 'react';
 import {
   Cell,
   IndexTable as PolarisIndexTable,
-  IndexTableProps,
+  IndexTableProps as PolarisIndexTableProps,
 } from 'polaris-glints';
 import { Checkbox } from '../Checkbox';
 import { CheckboxProps } from '../Checkbox';
 import { Row } from './components/Row/Row';
 import { StyledIndexTable } from './IndexTableStyle';
+import { LoadingState } from './components/LoadingState';
+
+type IndexTableProps = Omit<PolarisIndexTableProps, 'emptySearchTitle'>;
 
 const IndexTable = ({
   bulkActions,
   children,
   itemCount,
   selectedItemsCount,
+  loading,
+  emptyState,
   ...props
 }: IndexTableProps) => {
   const renderCheckboxHeader = ({
@@ -37,8 +42,20 @@ const IndexTable = ({
       <PolarisIndexTable
         bulkActions={bulkActions}
         checkbox={renderCheckboxHeader}
-        itemCount={itemCount}
+        itemCount={loading ? 0 : itemCount}
         selectedItemsCount={selectedItemsCount}
+        emptySearchTitle={null}
+        loading={false}
+        emptyState={
+          loading ? (
+            <LoadingState
+              label={props.loadingLabel}
+              colSpan={props.headings.length}
+            />
+          ) : (
+            emptyState
+          )
+        }
         {...props}
       >
         {children}

src/@next/IndexTable/components/LoadingState/LoadingState.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Spinner } from '../../../Spinner';
+import { Blue, Neutral } from '../../../utilities/colors';
+import { LoadingStateContainer, SpinnerContainer } from './LoadingStateStyle';
+import { Typography } from '../../../Typography';
+
+interface LoadingStateProps {
+  colSpan: number;
+  label?: string;
+}
+
+export const LoadingState = ({ colSpan, label }: LoadingStateProps) => (
+  <LoadingStateContainer colSpan={colSpan + 1}>
+    <SpinnerContainer>
+      <Spinner height={48} width={48} fill={Blue.S99} />
+      <Typography variant="subtitle1" color={Neutral.B18}>
+        {label}
+      </Typography>
+    </SpinnerContainer>
+  </LoadingStateContainer>
+);

src/@next/IndexTable/components/LoadingState/LoadingStateStyle.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Breakpoints } from '../../..';
+
+export const LoadingStateContainer = styled.td`
+  height: 480px;
+`;
+
+export const SpinnerContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  gap: 16px;
+
+  p {
+    margin: 0;
+  }
+
+  @media (max-width: ${Breakpoints.large}) {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+`;

src/@next/IndexTable/components/LoadingState/index.ts

@@ -0,0 +1 @@
+export * from './LoadingState';