@atlaskit/table-tree/dist/es2019/components/internal/loader-item.js

A table tree is an expandable table for showing nested hierarchies of information.

import React, { useEffect, useState } from 'react';
import Spinner from '@atlaskit/spinner/spinner';
import CommonCell from './common-cell';
import { LoaderItemContainer } from './loader-item-container';
import { TreeRowContainer } from './tree-row-container';
const LoaderItem = ({
  depth = 1,
  loadingLabel,
  isCompleting,
  onComplete
}) => {
  const [phase, setPhase] = useState('loading');
  useEffect(() => {
    if (phase === 'loading' && isCompleting) {
      setPhase(() => {
        onComplete();
        return 'complete';
      });
    }
  }, [isCompleting, onComplete, phase]);
  return phase === 'loading' ? /*#__PURE__*/React.createElement(TreeRowContainer, null, /*#__PURE__*/React.createElement(CommonCell, {
    indent: `calc(${"var(--ds-space-300, 24px)"} * ${depth})`,
    width: "100%"
  }, /*#__PURE__*/React.createElement(LoaderItemContainer, {
    isRoot: depth === 1
  }, /*#__PURE__*/React.createElement(Spinner, {
    size: "small",
    testId: "table-tree-spinner",
    label: loadingLabel
  })))) : null;
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default LoaderItem;