1import { type FC } from "react";
 2
 3interface AwaitingProps {
 4  isFetching?: boolean;
 5  isNotFound?: boolean;
 6  NotFound?: JSX.Element;
 7  Skeleton?: JSX.Element;
 8  Component: JSX.Element;
 9}
10
11/**
12 * @param isFetching - returned from react-query
13 * which indicate the promise is still fetching.
14 * @example
15 * const { data, isFetching} = useQuery();
16 *
17 * @param isNotFound - whether the data return is empty or not
18 * @param NotFound - Not found component
19 * @param Component - The actual component itself
20 * @param Skeleton - Skeleton structure which will be presented
21 * when the data is still pending and fetching
22 *
23 */
24export const Awaiting: FC<AwaitingProps> = ({
25  isFetching,
26  isNotFound,
27  NotFound,
28  Skeleton,
29  Component,
30}) => {
31  if (isFetching) {
32    return Skeleton;
33  }
34  if (isNotFound) {
35    return NotFound;
36  }
37  return Component;
38};