Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 23x 812x 812x 812x 106x 706x 706x | import React, { ReactNode } from "react";
import { UseQueryResult } from "react-query";
import PanelLoadingSkeleton from "../PanelLoadingSkeleton";
import { ErrorState } from "../ErrorState/ErrorState";
import SectionCardBase from "@shared/SidePanel/components/SectionCard/SectionCardBase";
interface QueryBoundaryProps<T = unknown> {
query: UseQueryResult<T, unknown>;
errorTitle: string;
children: ReactNode;
loadingTitle?: string; // keeping this just in case you were planning to use it later
loadingVariant?: "card" | "title";
showCard?: boolean;
}
/**
* QueryBoundary
*
* Lightweight wrapper that handles loading and error states for react-query.
* Renders a skeleton while loading, an error state on failure, or children on success.
*
* @example
* <QueryBoundary
* query={queries.merchantQuery}
* errorTitle="Merchant data could not be loaded"
* >
* <YourContent />
* </QueryBoundary>
*/
export const QueryBoundary = <T,>({
query,
errorTitle,
children,
loadingVariant = "card",
showCard,
}: QueryBoundaryProps<T>) => {
const { isLoading, error, refetch } = query ?? {};
const CardWrapper = showCard ? SectionCardBase : React.Fragment;
if (isLoading) {
return (
<CardWrapper>
<PanelLoadingSkeleton variant={loadingVariant} />
</CardWrapper>
);
}
Iif (error) {
return (
<CardWrapper>
<ErrorState title={errorTitle} onRetry={() => refetch?.()} />
</CardWrapper>
);
}
return <>{children}</>;
};
export default QueryBoundary;
|