fix(ui): Move connection loading usage outside of the connection butt…

…ons (#3725) Co-authored-by: Joe Bell <[email protected]>
clerk · Jul 16, 2024 · 6bdfb52 · 6bdfb52
1 parent 3d3d5ae
commit 6bdfb52
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/.changeset/soft-radios-sell.md b/.changeset/soft-radios-sell.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/common/connections.tsx b/packages/ui/src/common/connections.tsx
@@ -16,14 +16,16 @@ export function Connections(props: { disabled?: boolean }) {
         const iconKey = connection?.icon;
         const IconComponent = iconKey ? Icon[iconKey] : null;
         return (
-          <Common.Connection
+          <Common.Loading
             key={c.provider}
-            name={c.provider}
-            asChild
+            scope={`provider:${c.provider}`}
           >
-            <Common.Loading scope={`provider:${c.provider}`}>
-              {isConnectionLoading => {
-                return (
+            {isConnectionLoading => {
+              return (
+                <Common.Connection
+                  name={c.provider}
+                  asChild
+                >
                   <Connection.Button
                     busy={isConnectionLoading}
                     disabled={props?.disabled || isConnectionLoading}
@@ -32,10 +34,10 @@ export function Connections(props: { disabled?: boolean }) {
                   >
                     {connection?.name || c.provider}
                   </Connection.Button>
-                );
-              }}
-            </Common.Loading>
-          </Common.Connection>
+                </Common.Connection>
+              );
+            }}
+          </Common.Loading>
         );
       })}
     </Connection.Root>