From e30eabd17c6cb08d692c98376036b21afac4232a Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 24 Apr 2025 19:56:47 +0300
Subject: [PATCH] fix(clerk-js): Avoid laggy ui when closing drawer after
 canceling subscription

---
 .changeset/easy-zebras-wave.md                       |  5 +++++
 .../components/Subscriptions/SubscriptionDetails.tsx | 12 +++++++++++-
 .../clerk-js/src/ui/contexts/components/Plans.tsx    |  1 -
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/easy-zebras-wave.md

diff --git a/.changeset/easy-zebras-wave.md b/.changeset/easy-zebras-wave.md
new file mode 100644
index 00000000000..193b513219d
--- /dev/null
+++ b/.changeset/easy-zebras-wave.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Avoid laggy ui when closing drawer after canceling subscription.
diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionDetails.tsx b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionDetails.tsx
index 759ef766ceb..d9443b45410 100644
--- a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionDetails.tsx
+++ b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionDetails.tsx
@@ -21,7 +21,7 @@ import {
   Span,
   Text,
 } from '../../customizables';
-import { Alert, Avatar, Drawer, ReversibleContainer } from '../../elements';
+import { Alert, Avatar, Drawer, ReversibleContainer, useDrawerContext } from '../../elements';
 import { InformationCircle } from '../../icons';
 import { formatDate, handleError } from '../../utils';
 
@@ -34,6 +34,15 @@ export function SubscriptionDetails({
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [cancelError, setCancelError] = useState<ClerkRuntimeError | ClerkAPIError | string | undefined>();
+
+  const { setIsOpen } = useDrawerContext();
+
+  const handleClose = () => {
+    if (setIsOpen) {
+      setIsOpen(false);
+    }
+  };
+
   if (!subscription) {
     return null;
   }
@@ -48,6 +57,7 @@ export function SubscriptionDetails({
       .then(() => {
         setIsSubmitting(false);
         onSubscriptionCancel?.();
+        handleClose();
       })
       .catch(error => {
         handleError(error, [], setCancelError);
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 2fc5d8fec64..5e112a540cf 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -174,7 +174,6 @@ export const usePlansContext = () => {
           onSubscriptionCancel: () => {
             ctx.revalidate();
             onSubscriptionChange?.();
-            clerk.__internal_closeSubscriptionDetails();
           },
           portalId:
             mode === 'modal'