Issue with Modal Popups: Delay and Animation Not Loading

Michael R. · 2024-07-11T22:00:12.428Z

Hey team found another issue - This has to do with the modal popups, during the close sequence. For some reason after it opens, there is a delay that you can't open the pop up again, and sometimes doesn't even load the pop up animation at all. I recorded a video on it:

Issue with Modal Popups: Delay and Animation Not Loading | Relume Community

3 comments

· Sorted by Oldest

Matt J.
·
Hey Michael R. - thanks for the loom. Most of these components have been around for a couple years now and have been pretty well battle tested. We also run QA on the ecosystem monthly (and obviously as we are developing). I say all this to say that GENERALLY (we are not perfect by any means) but generally any bugs like this are the result of something unique to your project. The very best thing to provide for any kind of bug with a component is the read-only. It could be placement, it could be that an interaction didn't copy over, it could be a class issue, or a class duplication issue, it could be really just about a million things and I can narrow that down extremely fast and efficiently if I have the read-only link. For this specific issue though, I've seen it a thousand times and its a simple yet complex fix. And its because you are using it in multiple places but I have to make some assumptions. One assumption I have to make is that you have a single modal instance but multiple trigger points (buttons) - if thats the case then the button and modal instances are separate of each other and the way the interactions are set up, requires some tweaks to change that. Originally the modal button and modal component were next to each other (siblings) so you just need to change the interaction to effect "all elements with this class" and it should work fine. The other assumption (if assumption A is wrong) is that you've actually got 3 instances of the modal button and modal component on the page. Again, because of the interactions - some of them on open say something like "All elements with this class" but on close its only saying "Only siblings of this element" or something like that. So on close, its only closing out one instance of that modal and not the others. There's also the 1st click and 2nd click, and a few other possibilities of what it is. Wanted to type this out so you had a better feel for where I'm coming from - if you want a straight forward, simple answer - send me the read-only - DM It to me if thats better for you as well - happy to take a look and I'll snap back a quick screenshot - no problem!
Michael R.
·
Sounds good Matt - I'll send that to you this weekend. Also to note, and I don't know if this could be an issue, we have a Hubspot chat bot on the right side of our site, and we have noticed that certain interactions do tend to be a bit "slower" and we think it might be the Hubspot bot that could also be causing the issue.
Matt J.
·
Michael R. yeah maybe - unlikely though. I would check out how many unused interactions you might have in the project - when you are in the interactions panel there is a cleanup tool top right just like with the styles manager. Its possible the JavaScript file is just really big.

Matt J.
·
Hey Michael R. - thanks for the loom. Most of these components have been around for a couple years now and have been pretty well battle tested. We also run QA on the ecosystem monthly (and obviously as we are developing). I say all this to say that GENERALLY (we are not perfect by any means) but generally any bugs like this are the result of something unique to your project. The very best thing to provide for any kind of bug with a component is the read-only. It could be placement, it could be that an interaction didn't copy over, it could be a class issue, or a class duplication issue, it could be really just about a million things and I can narrow that down extremely fast and efficiently if I have the read-only link. For this specific issue though, I've seen it a thousand times and its a simple yet complex fix. And its because you are using it in multiple places but I have to make some assumptions. One assumption I have to make is that you have a single modal instance but multiple trigger points (buttons) - if thats the case then the button and modal instances are separate of each other and the way the interactions are set up, requires some tweaks to change that. Originally the modal button and modal component were next to each other (siblings) so you just need to change the interaction to effect "all elements with this class" and it should work fine. The other assumption (if assumption A is wrong) is that you've actually got 3 instances of the modal button and modal component on the page. Again, because of the interactions - some of them on open say something like "All elements with this class" but on close its only saying "Only siblings of this element" or something like that. So on close, its only closing out one instance of that modal and not the others. There's also the 1st click and 2nd click, and a few other possibilities of what it is. Wanted to type this out so you had a better feel for where I'm coming from - if you want a straight forward, simple answer - send me the read-only - DM It to me if thats better for you as well - happy to take a look and I'll snap back a quick screenshot - no problem!
Michael R.
·
Sounds good Matt - I'll send that to you this weekend. Also to note, and I don't know if this could be an issue, we have a Hubspot chat bot on the right side of our site, and we have noticed that certain interactions do tend to be a bit "slower" and we think it might be the Hubspot bot that could also be causing the issue.
Matt J.
·
Michael R. yeah maybe - unlikely though. I would check out how many unused interactions you might have in the project - when you are in the interactions panel there is a cleanup tool top right just like with the styles manager. Its possible the JavaScript file is just really big.