From 623495a176fb4b93b6f62303e3e0d277e6aa3302 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Thu, 15 May 2025 07:49:30 +0200
Subject: [PATCH] fix(SW-2757): add AnimatePresence to rate card modals to
 avoid page freeze

---
 .../lib/components/RateCard/Modal/index.tsx   | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/lib/components/RateCard/Modal/index.tsx b/packages/design-system/lib/components/RateCard/Modal/index.tsx
index 25a1981c3..4b3a5edd3 100644
--- a/packages/design-system/lib/components/RateCard/Modal/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Modal/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import { type PropsWithChildren, useEffect, useState } from 'react'
 import {
   Dialog,
@@ -132,6 +132,8 @@ export default function Modal({
     }
   }, [isOpen])
 
+  const shouldRender = isOpen || animation !== AnimationStateEnum.unmounted
+
   if (!trigger) {
     return (
       <InnerModal
@@ -159,16 +161,20 @@ export default function Modal({
       }
     >
       {trigger}
-      <InnerModal
-        onAnimationComplete={onAnimationComplete}
-        animation={animation}
-        setAnimation={setAnimation}
-        title={title}
-        subtitle={subtitle}
-        withActions={withActions}
-      >
-        {children}
-      </InnerModal>
+      <AnimatePresence>
+        {shouldRender && (
+          <InnerModal
+            onAnimationComplete={onAnimationComplete}
+            animation={animation}
+            setAnimation={setAnimation}
+            title={title}
+            subtitle={subtitle}
+            withActions={withActions}
+          >
+            {children}
+          </InnerModal>
+        )}
+      </AnimatePresence>
     </DialogTrigger>
   )
 }