feat: whileFetching - new loader argument

chore: Refactored useCallback into a simple cache

Author: imp-dance

README.md

@@ -131,6 +131,17 @@ Make sure you call the second argument as a component, not a function:
 }
 ```
 
+**whileFetching**?:
+
+```typescript
+{
+  append?: (props: P, data?: R) => ReactElement;
+  prepend?: (props: P, data?: R) => ReactElement;
+}
+```
+
+By using this instead of `onFetching`, you ensure that you don't reset the internal state of the component while fetching.
+
 ## withLoader
 
 Wraps a component to provide it with loader data.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryfylke-react/rtk-query-loader",
-  "version": "0.3.3",
+  "version": "0.3.31",
   "description": "Lets you create loaders that contain multiple RTK queries.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

src/RTKLoader.tsx

@@ -10,6 +10,10 @@ type Props<T> = {
     error: FetchBaseQueryError | SerializedError
   ) => React.ReactElement;
   onFetching?: React.ReactElement;
+  whileFetching?: {
+    append?: React.ReactElement;
+    prepend?: React.ReactElement;
+  };
   loader?: React.ReactElement;
 };
 
@@ -30,7 +34,17 @@ export function RTKLoader<T>(
     return props.onFetching;
   }
   if (props.query.data !== undefined) {
-    return props.onSuccess(props.query.data);
+    return (
+      <>
+        {props.query.isFetching
+          ? props.whileFetching?.prepend ?? null
+          : null}
+        {props.onSuccess(props.query.data)}
+        {props.query.isFetching
+          ? props.whileFetching?.append ?? null
+          : null}
+      </>
+    );
   }
   return <React.Fragment />;
 }

src/createLoader.ts

@@ -50,6 +50,7 @@ export const createLoader = <
     onLoading: createLoaderArgs.onLoading,
     onError: createLoaderArgs.onError,
     onFetching: createLoaderArgs.onFetching,
+    whileFetching: createLoaderArgs.whileFetching,
     queriesArg: createLoaderArgs.queriesArg,
     extend: function <
       QRUb extends readonly Types.UseQueryResult<unknown>[],

src/types.ts

@@ -85,6 +85,11 @@ export type WithLoaderArgs<
   A = never
 > = Loader<P, R, A>;
 
+type WhileFetchingArgs<P extends unknown, R extends unknown> = {
+  prepend?: (props: P, data?: R) => ReactElement;
+  append?: (props: P, data?: R) => ReactElement;
+};
+
 export type CreateLoaderArgs<
   P extends unknown,
   QRU extends readonly UseQueryResult<unknown>[],
@@ -102,6 +107,7 @@ export type CreateLoaderArgs<
     props: P,
     renderBody: () => ReactElement
   ) => ReactElement;
+  whileFetching?: WhileFetchingArgs<P, R>;
 };
 
 export type Loader<
@@ -121,6 +127,7 @@ export type Loader<
     props: P,
     renderBody: () => ReactElement
   ) => ReactElement;
+  whileFetching?: WhileFetchingArgs<P, R>;
   extend: <
     QRUb extends readonly UseQueryResult<unknown>[],
     Pb extends unknown = P,

src/withLoader.tsx

@@ -10,21 +10,20 @@ export const withLoader = <
   Component: Types.ComponentWithLoaderData<P, R>,
   args: Types.WithLoaderArgs<P, R, A>
 ): Types.Component<P> => {
-  return (props: P) => {
+  let CachedComponent: Types.ComponentWithLoaderData<P, R>;
+  const LoaderComponent = (props: P) => {
     const useLoaderArgs = [];
     if (args.queriesArg) {
       useLoaderArgs.push(args.queriesArg(props));
     }
     const query = args.useLoader(
       ...(useLoaderArgs as Types.OptionalGenericArg<A>)
     );
-
-    const ForwardedComponent = React.useCallback(
-      React.forwardRef(
+    if (!CachedComponent) {
+      CachedComponent = React.forwardRef(
         Component as React.ForwardRefRenderFunction<R, P>
-      ) as unknown as Types.ComponentWithLoaderData<P, R>,
-      []
-    );
+      ) as unknown as Types.ComponentWithLoaderData<P, R>;
+    }
 
     return (
       <RTKLoader
@@ -41,13 +40,27 @@ export const withLoader = <
             : undefined
         }
         onSuccess={(data) => (
-          <ForwardedComponent {...props} ref={data} />
+          <CachedComponent {...props} ref={data} />
         )}
+        whileFetching={
+          args.whileFetching
+            ? {
+                prepend: args.whileFetching?.prepend?.(
+                  props,
+                  query?.data
+                ),
+                append: args.whileFetching?.prepend?.(
+                  props,
+                  query?.data
+                ),
+              }
+            : undefined
+        }
         onFetching={args?.onFetching?.(
           props,
           query.data
             ? () => (
-                <ForwardedComponent
+                <CachedComponent
                   {...props}
                   ref={query.data as R}
                 />
@@ -57,4 +70,5 @@ export const withLoader = <
       />
     );
   };
+  return LoaderComponent;
 };