import React, { useEffect, useState } from "react";
import { LoadingTip, ErrorTip } from "../tips";
import { CascaderLoadingProps } from "./CascaderProps";

export function CascaderLoading({ onLoad }: CascaderLoadingProps) {
  const [error, setError] = useState(false);

  useEffect(() => {
    handleLoad();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  async function handleLoad() {
    setError(false);
    try {
      await onLoad();
    } catch (_) {
      setError(true);
    }
  }

  if (error) {
    return <ErrorTip onRetry={handleLoad} />;
  }
  return <LoadingTip />;
}

CascaderLoading.displayName = "CascaderLoading";