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,22 +154,28 @@ export default function Modal({
     }
   }, [isOpen])
 
+  const shouldRender = isOpen || animation !== AnimationStateEnum.unmounted
+
   if (!trigger) {
     return (
-      <InnerModal
+      <AnimatePresence>
-        onAnimationComplete={onAnimationComplete}
+        {shouldRender && (
-        animation={animation}
+          <InnerModal
-        setAnimation={setAnimation}
+            onAnimationComplete={onAnimationComplete}
-        onToggle={onToggle}
+            animation={animation}
-        isOpen={isOpen}
+            setAnimation={setAnimation}
-        title={title}
+            onToggle={onToggle}
-        subtitle={subtitle}
+            isOpen={isOpen}
-        withActions={withActions}
+            title={title}
-        hideHeader={hideHeader}
+            subtitle={subtitle}
-        className={className}
+            withActions={withActions}
-      >
+            hideHeader={hideHeader}
-        {children}
+            className={className}
-      </InnerModal>
+          >
+            {children}
+          </InnerModal>
+        )}
+      </AnimatePresence>
     )
   }
 
@@ -182,17 +188,21 @@ export default function Modal({
       }
     >
       {trigger}
-      <InnerModal
+      <AnimatePresence>
-        onAnimationComplete={onAnimationComplete}
+        {shouldRender && (
-        animation={animation}
+          <InnerModal
-        setAnimation={setAnimation}
+            onAnimationComplete={onAnimationComplete}
-        title={title}
+            animation={animation}
-        subtitle={subtitle}
+            setAnimation={setAnimation}
-        withActions={withActions}
+            title={title}
-        className={className}
+            subtitle={subtitle}
-      >
+            withActions={withActions}
-        {children}
+            className={className}
-      </InnerModal>
+          >
+            {children}
+          </InnerModal>
+        )}
+      </AnimatePresence>
     </DialogTrigger>
   )
 }