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, isNotFound, NotFound, Skeleton, Component
26}) => {
27    if (isFetching) {
28        return Skeleton
29    } else if (isNotFound) {
30        return NotFound
31    } else {
32        return Component
33    }
34}