Adds support for async react renders for admin extensions

packages/ui-extensions-react/src/surfaces/admin/render.tsx

@@ -25,18 +25,22 @@ import {ExtensionApiContext} from './context';
  */
 export function reactExtension<ExtensionTarget extends RenderExtensionTarget>(
   target: ExtensionTarget,
-  render: (api: ApiForRenderExtension<ExtensionTarget>) => ReactElement<any>,
+  render: (
+    api: ApiForRenderExtension<ExtensionTarget>,
+  ) => Promise<ReactElement<any>> | ReactElement<any>,
 ): ExtensionTargets[ExtensionTarget] {
   // TypeScript can’t infer the type of the callback because it’s a big union
   // type. To get around it, we’ll just fake like we are rendering the
   // Playground extension, since all render extensions have the same general
   // shape (`RenderExtension`).
-  return extension<'Playground'>(target as any, (root, api) => {
-    return new Promise((resolve, reject) => {
+  return extension<'Playground'>(target as any, async (root, api) => {
+    const element = await render(api as ApiForRenderExtension<ExtensionTarget>);
+
+    return new Promise<void>((resolve, reject) => {
       try {
         remoteRender(
           <ExtensionApiContext.Provider value={api}>
-            {render(api as ApiForRenderExtension<ExtensionTarget>)}
+            {element}
           </ExtensionApiContext.Provider>,
           root,
           () => {
@@ -46,7 +50,7 @@ export function reactExtension<ExtensionTarget extends RenderExtensionTarget>(
       } catch (error) {
         // Workaround for https://github.com/Shopify/ui-extensions/issues/325
         // eslint-disable-next-line no-console
-        console.error(error);
+        console.log(error);
         reject(error);
       }
     });