diff --git a/packages/kerosene-ui/package.json b/packages/kerosene-ui/package.json index 0048371..452762d 100644 --- a/packages/kerosene-ui/package.json +++ b/packages/kerosene-ui/package.json @@ -1,6 +1,6 @@ { "name": "@kablamo/kerosene-ui", - "version": "0.0.41", + "version": "0.0.42", "repository": "https://github.com/KablamoOSS/kerosene/tree/master/packages/kerosene-ui", "bugs": { "url": "https://github.com/KablamoOSS/kerosene/issues" diff --git a/packages/kerosene-ui/src/components/Boundaries/QueriesBoundary.spec.tsx b/packages/kerosene-ui/src/components/Boundaries/QueriesBoundary.spec.tsx index 2c3e12c..83bdf1f 100644 --- a/packages/kerosene-ui/src/components/Boundaries/QueriesBoundary.spec.tsx +++ b/packages/kerosene-ui/src/components/Boundaries/QueriesBoundary.spec.tsx @@ -21,6 +21,8 @@ const rejectedPromise = Promise.reject(error); // A .catch() handler must be added synchronously to prevent PromiseRejectionUnhandledWarning rejectedPromise.catch(noop); +const pendingPromise = new Promise(noop); + describe("QueriesBoundary", () => { it.each([ { @@ -84,6 +86,15 @@ describe("QueriesBoundary", () => { value1: rejectedPromise, value2: rejectedPromise, }, + { + expected: "errorFallback", + props: { + children: "Success", + errorFallback: <>errorFallback, + }, + value1: rejectedPromise, + value2: pendingPromise, + }, ] satisfies Array<{ expected: string; props: DistributiveOmit< diff --git a/packages/kerosene-ui/src/components/Boundaries/QueriesBoundary.tsx b/packages/kerosene-ui/src/components/Boundaries/QueriesBoundary.tsx index c8d6ea9..75455be 100644 --- a/packages/kerosene-ui/src/components/Boundaries/QueriesBoundary.tsx +++ b/packages/kerosene-ui/src/components/Boundaries/QueriesBoundary.tsx @@ -130,10 +130,6 @@ const QueriesBoundary = < [queries], ); - if (queries.some((query) => isQueryObserverLoadingResult(query))) { - return <>{loadingFallback}; - } - if (error) { if (React.isValidElement(errorFallback)) { return <>{errorFallback}; @@ -158,6 +154,10 @@ const QueriesBoundary = < ); } + if (queries.some((query) => isQueryObserverLoadingResult(query))) { + return <>{loadingFallback}; + } + return ( <> {typeof children === "function"