@lobehub/ui/es/chat/LoadingDots/LoadingDots.js

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import { memo } from 'react';
import { useStyles } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var LoadingDots = /*#__PURE__*/memo(function (_ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? 8 : _ref$size,
    color = _ref.color,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'dots' : _ref$variant,
    className = _ref.className;
  var _useStyles = useStyles({
      color: color,
      size: size
    }),
    styles = _useStyles.styles,
    cx = _useStyles.cx;
  var renderDots = function renderDots() {
    switch (variant) {
      case 'pulse':
        {
          return /*#__PURE__*/_jsx("div", {
            className: styles.pulseDot,
            style: {
              animationDelay: '0s'
            }
          });
        }
      case 'wave':
        {
          return /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsx("div", {
              className: styles.waveDot,
              style: {
                animationDelay: '0s'
              }
            }), /*#__PURE__*/_jsx("div", {
              className: styles.waveDot,
              style: {
                animationDelay: '0.12s'
              }
            }), /*#__PURE__*/_jsx("div", {
              className: styles.waveDot,
              style: {
                animationDelay: '0.24s'
              }
            })]
          });
        }
      case 'orbit':
        {
          return /*#__PURE__*/_jsxs("div", {
            className: styles.orbitContainer,
            children: [/*#__PURE__*/_jsx("div", {
              className: styles.orbitDot,
              style: {
                animationDelay: '0s'
              }
            }), /*#__PURE__*/_jsx("div", {
              className: styles.orbitDot,
              style: {
                animationDelay: '-0.4s'
              }
            }), /*#__PURE__*/_jsx("div", {
              className: styles.orbitDot,
              style: {
                animationDelay: '-0.8s'
              }
            })]
          });
        }
      case 'typing':
        {
          return /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsx("div", {
              className: styles.typingDot,
              style: {
                animationDelay: '0s'
              }
            }), /*#__PURE__*/_jsx("div", {
              className: styles.typingDot,
              style: {
                animationDelay: '0.15s'
              }
            }), /*#__PURE__*/_jsx("div", {
              className: styles.typingDot,
              style: {
                animationDelay: '0.3s'
              }
            })]
          });
        }
      default:
        {
          return /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsx("div", {
              className: styles.defaultDot,
              style: {
                animationDelay: '0s'
              }
            }), /*#__PURE__*/_jsx("div", {
              className: styles.defaultDot,
              style: {
                animationDelay: '0.15s'
              }
            }), /*#__PURE__*/_jsx("div", {
              className: styles.defaultDot,
              style: {
                animationDelay: '0.3s'
              }
            })]
          });
        }
    }
  };
  return /*#__PURE__*/_jsx("div", {
    className: cx(variant === 'orbit' ? styles.orbitWrapper : styles.container, className),
    children: renderDots()
  });
});
LoadingDots.displayName = 'LoadingDots';
export default LoadingDots;