From bcd6d65cd46c7cb91c78e1dd490e9949f08d79e7 Mon Sep 17 00:00:00 2001
From: Pagebakers <eelco@appulse.nl>
Date: Wed, 18 Oct 2023 17:47:47 +0200
Subject: [PATCH] fix: fixed flickering issue when closing large models with
 modals manager

---
 .changeset/olive-timers-wash.md               |  6 ++++
 packages/saas-ui-modals/src/provider.tsx      |  3 +-
 .../saas-ui-modals/stories/modals.stories.tsx | 34 ++++++++++++-------
 3 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/olive-timers-wash.md

diff --git a/.changeset/olive-timers-wash.md b/.changeset/olive-timers-wash.md
new file mode 100644
index 000000000..bd77229fc
--- /dev/null
+++ b/.changeset/olive-timers-wash.md
@@ -0,0 +1,6 @@
+---
+'@saas-ui/modals': patch
+'@saas-ui/react': patch
+---
+
+Fixed issue where closing large models with modals manager would flicker
diff --git a/packages/saas-ui-modals/src/provider.tsx b/packages/saas-ui-modals/src/provider.tsx
index 278f5633e..d20ad64a4 100644
--- a/packages/saas-ui-modals/src/provider.tsx
+++ b/packages/saas-ui-modals/src/provider.tsx
@@ -279,7 +279,8 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
       )
     }
 
-    closeComplete(id)
+    // @todo this is not ideal, but not all modals support onCloseComplete
+    setTimeout(() => closeComplete(id), 200)
   }
 
   const closeComplete = (id?: ModalId | null) => {
diff --git a/packages/saas-ui-modals/stories/modals.stories.tsx b/packages/saas-ui-modals/stories/modals.stories.tsx
index d2df64ca4..424c58e54 100644
--- a/packages/saas-ui-modals/stories/modals.stories.tsx
+++ b/packages/saas-ui-modals/stories/modals.stories.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Button, Stack, Container, MenuItem } from '@chakra-ui/react'
 
-import { createModals, useModals } from '../src'
+import { createModals } from '../src'
 import { MenuDialogList } from '../src/menu'
 
-import { Field, FormLayout } from '@saas-ui/forms'
+import { FormLayout } from '@saas-ui/forms'
 import { BaseModalProps, Modal } from '../src/modal'
 import { FormDialog } from '../src/form'
 import { createField } from '@saas-ui/forms'
@@ -40,7 +40,7 @@ const CustomModal: React.FC<CustomModalProps> = ({
   </Modal>
 )
 
-const { ModalsProvider, useModals: useCustomModals } = createModals({
+const { ModalsProvider: ModalsProvider, useModals } = createModals({
   modals: {
     custom: CustomModal,
     form: ZodFormDialog,
@@ -76,6 +76,18 @@ export const Basic = () => {
       >
         Open modal
       </Button>
+      <Button
+        onClick={() => {
+          const id = modals.open({
+            title: 'My Modal',
+            body: <>My modal</>,
+            size: 'xl',
+            footer: <Button onClick={() => modals.close(id)}>Close</Button>,
+          })
+        }}
+      >
+        Open xl modal
+      </Button>
       <Button
         onClick={() =>
           modals.alert({
@@ -173,11 +185,9 @@ export const Basic = () => {
         onClick={() => {
           modals.form({
             title: 'Form',
-            schema: {
-              title: {
-                type: 'string',
-              },
-            },
+            schema: z.object({
+              title: z.string(),
+            }),
             defaultValues: {
               title: 'My title',
             },
@@ -193,7 +203,7 @@ export const Basic = () => {
 }
 
 export const Custom = () => {
-  const modals = useCustomModals()
+  const modals = useModals()
 
   return (
     <Button
@@ -212,7 +222,7 @@ export const Custom = () => {
 }
 
 export const Form = () => {
-  const modals = useCustomModals()
+  const modals = useModals()
 
   return (
     <Button
@@ -248,7 +258,7 @@ export const Form = () => {
 }
 
 export const CustomForm = () => {
-  const modals = useCustomModals()
+  const modals = useModals()
 
   return (
     <Button
@@ -284,7 +294,7 @@ export const CustomForm = () => {
 }
 
 export const CustomAsComponent = () => {
-  const modals = useCustomModals()
+  const modals = useModals()
 
   return (
     <Button