[BUG] - Slow modal loading & collapsing?

[tomkennedy22]

NextUI Version

2.3.5

Describe the bug

Starting a new project, NextUI + React + Electron

Everything in the app is working well, but the modal load & destroy is very slow. Is this the designed performance?

https://github.com/nextui-org/nextui/assets/5054058/edd1c5c7-df22-4a4b-a5a8-d31f272c3910

Using "@nextui-org/react": "^2.3.5",

I pulled the Modal code directly from the site -

<Modal
            isOpen={isOpen}
            onOpenChange={onOpenChange}
        >
            <ModalContent>
                {(onClose) => (
                    <>
                        <ModalHeader className="flex flex-col gap-1">
                            Modal Title
                        </ModalHeader>
                        <ModalBody>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Nullam pulvinar risus non risus hendrerit venenatis.
                                Pellentesque sit amet hendrerit risus, sed porttitor quam.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Nullam pulvinar risus non risus hendrerit venenatis.
                                Pellentesque sit amet hendrerit risus, sed porttitor quam.
                            </p>
                            <p>
                                Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
                                dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis.

    Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
                                Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur
                                proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
                            </p>
                        </ModalBody>
                        <ModalFooter>
                            <Button color="danger" variant="light" onPress={onClose}>
                                Close
                            </Button>
                            <Button color="primary" onPress={onClose}>
                                Action
                            </Button>
                        </ModalFooter>
                    </>
                )}
            </ModalContent>
        </Modal>

All other modules are @latest

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Import Modal, write code, see slow performance

Expected behavior

Quicker load & destroy

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/5054058/505fd3be-6164-4442-afd6-032324f99cc3

Operating System Version

macOS

Browser

Other (add additonal context)

[linear[bot]]

ENG-716 [BUG] - Slow modal loading & collapsing?

[j-vitali]

Agree with that, modals and other components should be very fast to render... also on mobile screens it's really really slow...

[j-vitali]

cool Popup animation here: https://konstaui.com/

[jrgarciadev]

Hey @tomkennedy22 could you please check if you have the webSecurity disabled?

ref: https://github.com/framer/motion/issues/2261

[tomkennedy22]

Hey @tomkennedy22 could you please check if you have the webSecurity disabled?

ref: framer/motion#2261

Thanks for the recommendation @jrgarciadev. Unfortunately didn't help. I'll keep trying things

[Butonix]

Hey @tomkennedy22 could you please check if you have the webSecurity disabled? ref: framer/motion#2261

Thanks for the recommendation @jrgarciadev. Unfortunately didn't help. I'll keep trying things

Did you manage to solve your problem? I ran into her.

[tomkennedy22]

No, still an open issue, likely stemming from Framer Motion. I've read on other forums that it simply doesn't work w/ Electron.

[Butonix]

No, still an open issue, likely stemming from Framer Motion. I've read on other forums that it simply doesn't work w/ Electron.

I solved the issue like this. I did a transparent backdoor, motionProps did it through react-spring

[niraj-khatiwada]

This issue happens in Tauri apps as well but for custom motion config.

My motion config looks like this:

 motionProps={{
        variants: {
          enter: {
            scale: 1,
            rotate: 0,
            opacity: 1,
          },
          exit: {
            scale: 0.9,
            rotate: 3,
            opacity: 0.5,
          },
        },
      }}

https://github.com/nextui-org/nextui/assets/51436631/5d469ebc-a842-4e07-893d-3d4fc38db9b4

The only option I have is to disable animation for now. Anyone found any solution?