Merged in fix/modal-fast-close (pull request #2100)

fix - use animateprecence to avoid page freeze

* fix - use animateprecence to avoid page freeze


Approved-by: Michael Zetterberg

apps/scandic-web/components/Modal/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { cx } from "class-variance-authority"
-import { motion } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
 import { type PropsWithChildren, useEffect, useState } from "react"
 import {
   Dialog,
@@ -154,8 +154,12 @@ export default function Modal({
     }
   }, [isOpen])
 
+  const shouldRender = isOpen || animation !== AnimationStateEnum.unmounted
+
   if (!trigger) {
     return (
+      <AnimatePresence>
+        {shouldRender && (
           <InnerModal
             onAnimationComplete={onAnimationComplete}
             animation={animation}
@@ -170,6 +174,8 @@ export default function Modal({
           >
             {children}
           </InnerModal>
+        )}
+      </AnimatePresence>
     )
   }
 
@@ -182,6 +188,8 @@ export default function Modal({
       }
     >
       {trigger}
+      <AnimatePresence>
+        {shouldRender && (
           <InnerModal
             onAnimationComplete={onAnimationComplete}
             animation={animation}
@@ -193,6 +201,8 @@ export default function Modal({
           >
             {children}
           </InnerModal>
+        )}
+      </AnimatePresence>
     </DialogTrigger>
   )
 }