kerosene-ui: Prefer rendering error fallback over loading fallback in…

… QueriesBoundary. (#141) * kerosene-ui: Prefer rendering error fallback over loading fallback in QueriesBoundary * Bump package version.
KablamoOSS · Mar 5, 2024 · 5be989f · 5be989f
1 parent f072bc9
commit 5be989f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git 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
@@ -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<never>(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
@@ -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"