From 800152fe80dfe2fcc5dd6cd482e1121f9099a6c0 Mon Sep 17 00:00:00 2001
From: Thomas Marcucci <thomas.marcucci@shopify.com>
Date: Wed, 24 Jan 2024 20:36:34 +0000
Subject: [PATCH] Adds support for async react renders for admin extensions

---
 .changeset/afraid-ladybugs-begin.md                  |  5 +++++
 .../src/surfaces/admin/render.tsx                    | 12 ++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/afraid-ladybugs-begin.md

diff --git a/.changeset/afraid-ladybugs-begin.md b/.changeset/afraid-ladybugs-begin.md
new file mode 100644
index 0000000000..8be1013aee
--- /dev/null
+++ b/.changeset/afraid-ladybugs-begin.md
@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions-react': minor
+---
+
+Adds support for async render functions for Admin extensions
diff --git a/packages/ui-extensions-react/src/surfaces/admin/render.tsx b/packages/ui-extensions-react/src/surfaces/admin/render.tsx
index 92294ab2bb..6984900d3b 100644
--- a/packages/ui-extensions-react/src/surfaces/admin/render.tsx
+++ b/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>);
+
+    await new Promise<void>((resolve, reject) => {
       try {
         remoteRender(
           <ExtensionApiContext.Provider value={api}>
-            {render(api as ApiForRenderExtension<ExtensionTarget>)}
+            {element}
           </ExtensionApiContext.Provider>,
           root,
           () => {