[react-async] Expose renderLoading on AsyncComponentType (#2684)

.changeset/curvy-kings-rule.md

@@ -0,0 +1,5 @@
+---
+'@shopify/react-async': minor
+---
+
+Expose renderLoading on AsyncComponentType

packages/react-async/src/component.tsx

@@ -254,6 +254,11 @@ export function createAsyncComponent<
     writable: false,
   });
 
+  Reflect.defineProperty(FinalComponent, 'renderLoading', {
+    value: renderLoading,
+    writable: false,
+  });
+
   return FinalComponent;
 }
 

packages/react-async/src/tests/component.test.tsx

@@ -94,6 +94,19 @@ describe('createAsyncComponent()', () => {
         expect(renderLoading).toHaveBeenCalledTimes(1);
         expect(asyncComponent).not.toContainReactComponent(Loading);
       });
+
+      it('exposes renderLoading on the async component', () => {
+        const renderLoading = jest.fn(() => <Loading />);
+
+        const resolvable = createResolvablePromise(ResolvedComponent);
+
+        const AsyncComponent = createAsyncComponent({
+          load: () => resolvable.promise,
+          renderLoading,
+        });
+
+        expect(AsyncComponent.renderLoading).toBe(renderLoading);
+      });
     });
 
     describe('error', () => {

packages/react-async/src/types.ts

@@ -1,4 +1,4 @@
-import type {ReactElement} from 'react';
+import type {ReactElement, ReactNode} from 'react';
 import type {Resolver} from '@shopify/async';
 import type {IfAllOptionalKeys, NoInfer} from '@shopify/useful-types';
 
@@ -55,6 +55,7 @@ export interface AsyncComponentType<
   Preload(props: PreloadOptions): React.ReactElement<{}> | null;
   Prefetch(props: PrefetchOptions): React.ReactElement<{}> | null;
   KeepFresh(props: KeepFreshOptions): React.ReactElement<{}> | null;
+  renderLoading: ((props: Props) => ReactNode) | undefined;
 }
 
 export type PreloadOptions<T> = T extends AsyncHookTarget<