31 lines
962 B
TypeScript
31 lines
962 B
TypeScript
import type { ReactNode } from "react";
|
|
import type { UseQueryResult } from "@tanstack/react-query";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import InlineError from "@/lib/InlineError";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { styles } from "./styles";
|
|
|
|
/**
|
|
* One panel's data, with the loading and error surfaces the fire-and-forget
|
|
* route loaders leave to the page. A configuration page holds several
|
|
* independent collections; each states its own condition instead of the whole
|
|
* page waiting on the slowest request.
|
|
*/
|
|
export default function QueryPanel<T>({
|
|
query,
|
|
children,
|
|
}: {
|
|
query: UseQueryResult<T, Error>;
|
|
children: (data: T) => ReactNode;
|
|
}) {
|
|
if (query.isPending) {
|
|
return (
|
|
<p role="status" {...stylex.props(styles.pending, shared.pulse)}>
|
|
Loading…
|
|
</p>
|
|
);
|
|
}
|
|
if (query.isError) return <InlineError error={query.error} onRetry={() => void query.refetch()} />;
|
|
return <>{children(query.data)}</>;
|
|
}
|