import React from 'react';
import { LoadingIcon } from '../loading-icon';
import { jsx as _jsx } from "react/jsx-runtime";
/** Wraps loadable content and shows loader when it is not ready. Note: it requires parent with height
 * [CAPITALIZATION] Use sentence case
 */
export function LoadableContainer({
  isLoading,
  children,
  message = '',
  className = '',
  shouldKeepWrapper = true
}) {
  const content = isLoading ? /*#__PURE__*/_jsx(LoadingIcon, {
    className: "loadable-container-icon",
    testId: "loadable-container-icon",
    message: message
  }) : children;
  return shouldKeepWrapper ? /*#__PURE__*/_jsx("div", {
    className: `loadable-container ${className}`,
    children: content
  }) : content;
}