Skip to content

Commit 0559d19

Browse files
authored
Merge pull request #868 from tkhq/amir/modal-flicker
Fixed modal getting stuck if spammed
2 parents e2a5653 + 7d16426 commit 0559d19

File tree

1 file changed

+19
-17
lines changed
  • packages/react-wallet-kit/src/providers/modal

1 file changed

+19
-17
lines changed

packages/react-wallet-kit/src/providers/modal/Root.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -54,40 +54,42 @@ export function ModalRoot(props: ModalRootProps) {
5454
const node = containerRef.current;
5555
if (!node || !observeResize) return;
5656

57+
let cancelled = false; // To prevent setting state on unmounted component
5758
const observer = new ResizeObserver(([entry]) => {
58-
if (!entry) return;
59+
if (!entry || cancelled) return;
5960
setContentBlur(10);
60-
6161
const { width: newWidth, height: newHeight } = entry.contentRect;
62-
6362
setHeight(newHeight);
6463
setWidth(newWidth);
65-
setTimeout(() => setContentBlur(0), 100); // Remove blur after short delay
64+
setTimeout(() => !cancelled && setContentBlur(0), 100);
6665
});
6766

6867
observer.observe(node);
69-
return () => observer.disconnect();
68+
return () => {
69+
cancelled = true;
70+
observer.disconnect();
71+
};
7072
}, [containerRef.current, observeResize]);
7173

7274
useEffect(() => {
75+
let cancelled = false; // To prevent setting state on unmounted component
76+
7377
const resize = () => {
74-
if (containerRef.current) {
75-
setContentBlur(10);
76-
const rect = containerRef.current.getBoundingClientRect();
77-
setHeight(rect.height);
78-
setWidth(rect.width);
79-
setTimeout(() => setContentBlur(0), 100); // Remove blur after short delay
80-
}
78+
if (cancelled || !containerRef.current) return;
79+
setContentBlur(10);
80+
const rect = containerRef.current.getBoundingClientRect();
81+
setHeight(rect.height);
82+
setWidth(rect.width);
83+
setTimeout(() => !cancelled && setContentBlur(0), 100);
8184
};
8285

8386
if (current) {
8487
setObserveResize(true);
8588
requestAnimationFrame(resize);
86-
87-
// Disable body scroll when modal is open
88-
const originalStyle = window.getComputedStyle(document.body).overflow;
89+
const originalStyle = document.body.style.overflow;
8990
document.body.style.overflow = "hidden";
9091
return () => {
92+
cancelled = true;
9193
document.body.style.overflow = originalStyle;
9294
};
9395
} else {
@@ -96,7 +98,7 @@ export function ModalRoot(props: ModalRootProps) {
9698
setWidth(isMobile ? width : width / 1.3);
9799
return;
98100
}
99-
}, [current]);
101+
}, [current, isMobile]);
100102

101103
return (
102104
<Transition appear show={!!current} as={Fragment}>
@@ -129,7 +131,7 @@ export function ModalRoot(props: ModalRootProps) {
129131
{/* TODO (Amir): Does adding transition-colors here mess with the children? Probably. If you see some weird slow colour transitions, this is most likely the culprit! */}
130132
<div
131133
className={clsx(
132-
"tk-modal fixed inset-0 flex justify-center transition-colors duration-300",
134+
"tk-modal fixed inset-0 flex justify-center transition-colors",
133135
{ dark: config?.ui?.darkMode },
134136
{ "items-end": isMobile },
135137
{ "items-center": !isMobile },

0 commit comments

Comments
 (0)